Vue2核心知识

Vue2核心知识

Vue实例

new Vue(options)

el

• 指定Vue实例挂载的元素，可以是一个CSS选择器字符串，或一个DOM元素。

data

• 定义数据

• 1. 值可以为对象，也可以为函数，但组件中必须是函数。 • 2. data中尽量不要用箭头函数。 • 3. data中后续动态添加的新属性，Vue将无法监听这些属性的变化（不是响应式的），可以使用$set()解决该问题。

props

• 接收父组件传递的属性

• 子组件不能直接修改接收到的props的值——单项数据流。 • 三种接收方式 • 1. 仅接收 • 2. 接收的同时：限制类型 • type • 3.接收的同时：限制类型、限制必要性、指定默认值 • type • required • default

methods

• 定义方法

• Vue所管理的函数，不要用箭头函数定义。 • 非Vue所管理的函数，一般用箭头函数定义。 • this指向 • 组件中：this是组件实例对象。 • vm中：this是vm。

computed

• 计算属性

• 根据已有的数据计算得出新的属性值。 • 基于依赖进行计算。 • 内部具有缓存机制。 • 对比methods • 计算属性依赖的内容发生变更时，才会重新计算。而方法是只要页面重新渲染，就会重新调用执行。 • 计算属性可以有getter和setter方法，可以通过setter方法来对计算属性进行修改，但使用频率不高。

watch

• 用于监听数据

• 被监视的可以是：data、computed、props等。 • 配置深度监视可以监测对象内部属性的改变。 • 与computed的对比 • computed返回一个计算后的值，而watch没有返回值，它主要用于执行一些逻辑操作，例如异步请求数据等。

template

• 用于定义Vue实例的模板。

MVVM模型

desc

模型（Model）

• 可以是：从服务器获取的数据、本地存储的数据。

视图（View）

• 视图通常由HTML模板表示，用于将模型的数据渲染到视图上。

视图模型（ViewModel）

• 视图和模型之间的桥梁，它负责处理视图和模型之间的通信和交互。

模板语法

插值语法

在模板中输出变量，可以写JavaScript表达式。例如：{{1+2}}，{{a}}，{{str.toUpperCase()}}，但不能写语句。

指令语法

v-model

• 基本使用

• 用于输入类DOM元素，实现双向数据绑定。可以实现表单元素值的双向同步。

• 进阶使用

• 用在组件标签上，是一种组件通信方式。

v-bind

• 简写为：将Vue实例的数据，绑定到元素的属性上。绑定的数据可以是属性或计算属性。

v-if、v-else、v-else-if

• 用于根据条件来添加或移除元素。

v-show

• 根据条件来控制元素的显示和隐藏。通过修改元素的display CSS属性来实现，元素始终存在于DOM中。

v-for

• 用于循环渲染列表中的元素，下面的【列表渲染】中会详细说。

v-on

• 简写为@，用于监听DOM事件，并触发Vue实例中对应的方法，可以通过指令参数传递事件名，也可以使用修饰符来对事件进行处理，下面的【事件处理】中会详细说。

v-text

• 用于将数据渲染到元素的文本内容中。v-text会将数据转换为字符串，而v-html会解析数据中的HTML标签。

样式绑定

class样式绑定

字符串写法

• :class="xxx"，要绑定的样式，类名不确定。

对象写法

• :class="{active:xxx}"，要绑定的样式，个数确定、类名确定，但不确定用不用。

数组写法

• :class="[xxx,xxx,xxx]"，要绑定的样式，个数、类名都不确定。

style样式绑定

字符串写法

• :style="xxx"，字符串写法。

对象写法

• :style="xxx"，对象写法适用于：样式的属性名确定，但值不确定。

数组写法

• :style="xxx"，对象写法适用于：样式的属性名确定，但值不确定。

列表渲染

v-for

遍历数组

• <li v-for="(item,index) in arr" :key="index"> {{item}} </li>

遍历对象

• <li v-for="(value,key,index) in car" :key="index"> {{value}} - {{key}} - {{index}}</li>

遍历字符串

• <li v-for="(char,index) in str" :key="index"> {{char}} - {{index}} </li>

遍历指定次数

• <li v-for="(number,index) in 10" :key="index"> {{number}} - {{index}} </li>

特殊情况（均不报错）

• <h1 v-for="(a,b) in null">尚硅谷</h1>
• <h1 v-for="(a,b) in undefined">尚硅谷</h1>
• <h1 v-for="(a,b) in '' ">尚硅谷</h1>
• <h1 v-for="(a,b) in true ">尚硅谷</h1>

key的作用

提高性能

• key属性帮助Vue跟踪每个节点的身份，当数据发生变化时，Vue可以更准确地确定哪些节点是新创建的、被修改的或被删除的。Vue通过比较新旧节点的key来最小化DOM操作，提高性能。

注意点

• key具有唯一性，最好使用唯一的标识符，若后续有破坏顺序的操作，一定要避免使用随机数或索引值。

数组更新检测

Vue中操作数组，一定要用这7个数组的变更方法

• push
• unshift
• pop
• shift
• sort
• reverse
• splice

事件绑定

事件绑定

使用 v-on:xxx 或 @xxx 绑定事件，xxx是事件名，同原生 DOM 事件名。

事件对象

Vue在触发事件回调时，会主动的给我们传入一个参数 —— event（事件对象）。

事件传参

不传递参数

• @click="show" ，show 方法会收到一个event（事件对象）。

传一个参数

• @click="show(6)" ，show方法只会收到一个6。

传多个参数

• @click="show(6,7,8)" ，show方法会收到：6、7、8。

传参+事件对象

• @click="show($event,6)"，show方法会收到：event、6。

事件修饰符

.stop

• 阻止事件冒泡。使用.stop修饰符可以阻止事件向上冒泡，即停止事件传播到父元素。

.prevent

• 阻止默认事件。使用.prevent修饰符可以阻止元素的默认行为，例如阻止表单提交或链接跳转等。

.once

• 只触发一次事件处理函数。使用.once修饰符可以确保事件处理函数只执行一次，之后会自动解绑。

键盘事件别名

回车 => enter

删除 => delete （退格 、 删除 按键）

退出 => esc

空格 => space

换行 => tab（必须配合keydown去使用）

上 => up

下 => down

左 => left

右 => right

生命周期

何为生命周期？

在特定时刻自动执行的函数，(又称周期函数、钩子函数)

整体流程

1. beforeCreate

• 在初始化之前执行的函数

2. Created

• 在初始化之后执行的函数

3. beforeMount

• 在组件内容被渲染到页面之前自动执行的函数
• 注意：此时无法找到任何模板DOM节点

4. mounted

• 在组件内容被渲染到页面之后自动执行的函数

5. beforeUpdate

• 在数据将要变化之前自动执行的函数

6. updated

• 在数据发生变化之后自动执行的函数

7. beforeUnmount

• 在VUE实例销毁之前自动执行的函数

8. unmounted

• 在VUE实例销毁之后自动执行的函数

整体图示

desc

组件化

什么是组件？

每个组件都有自己的结构、样式和行为，并且可以在应用程序中独立使用或与其他组件组合在一起形成更大的功能。组件具备复用性，可以使用多次。

定义组件

Vue.extend(options)

• 其中的options和new Vue(options)几乎一样，但也有点小区别：

• ① 组件配置中不能写el。 • ② 组件配置中data必须写成函数。

全局组件

注册方式：Vue.component('组件名'，{})。

特点：全局组件只要定义，随处可以使用。

局部组件

注册方式：在父组件里new Vue({components:{Hello:Hello}})。

特点：只能在其父组件中使用。

关于组件名

一个单词组成

• 第一种写法：(首字母小写)：school
• 第二种写法：(首字母大写，推荐)：School

多个单词组成

• 第一种写法：kebab-case命名，例如：atguigu-school
• 第二种写法：CamelCase命名，例如：AtguiguSchool

VueComponent

组件的本质是一个构造函数，名为VueComponent

VueComponent是Vue.extend()生成的

Vue 和 VueComponent 的关系

desc

slot插槽

默认插槽

父组件写法

• <Hello><span>你好啊</span></Hello>

子组件写法

• <slot>default value</slot>

具名插槽

概念：一个组件里，可以设置多个插槽，然后在父组件里可以写多个<template>来填充这些插槽。

父组件

• <template slot="header">

子组件

• <slot name="header"></slot>

作用域插槽

当子组件的具体标签输出方式，要有父组件决定时，可以使用作用域插槽。

父组件

• <Game> <template scope="parmas"> <span>{{parmas.games}}<span> </template></Game>

子组件

• <slot :games="games"></slot>

mixin 混入

什么是混入

混入（mixin）是一种用于在多个组件之间共享代码的技术。使用混入，您可以定义一组可重用的逻辑，然后将其混入到需要该逻辑的组件中。这样可以避免代码重复，提高代码的可维护性和可重用性。

优先级

数据和方法：组件data ，methods 优先级高于mixin data，methods优先级。

生命周期：生命周期函数，先执行mixin里面的，再执行组件里的。

自定义的属性、组件中的属性、优先级高于mixin属性的优先级。

局部mixin

mixins:[myMixin]

全局mixin

Vue.mixin( )

特别注意：Vue3中尽量避免使用mixin，因为可以使用CompositionAPI来代替，可维护性更高。