2021-10-18

vue中有两种数据绑定的方式：

1、单向数据绑定（v-bind）：数据只能从data流向页面

2、双向数据绑定（v-model）：数据不仅能从data流向页面，也可以从页面流向data。

备注：

1、双向绑定一般用于表单类元素上（如：input、select等）

2、v-model：value可以简写为v-model，因为v-model默认收集的就是value值。

data与el的两种写法：

1、el有两种写法（1）new Vue时候配置el属性

（2）先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值

2、data有两种写法（1）对象式（2）函数式。

注：目前两种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3、一个重要的原则：由vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是vue实例了

MVVM模型

1、M：模型（Model）：data中的数据

2、V：视图（View）：模板代码

3、VM：视图模型（ViewModel）：Vue实例

观察发现：

1、data中所有的属性，最后都出现在vm身上

2、vm身上所有的属性及Vue原型上所有的属性，在Vue模板中都可以直接使用。

​ 1.Vue中的数据代理：

​ 通过vm对象来代理data对象中属性的操作（读/写）

​ 2.Vue中数据代理的好处：

​ 更加方便的操作data中的数据

​ 3.基本原理：

​ 通过Object.defineProperty()把data对象中所有属性添加到vm上。 为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。

事件的基本使用：

​ 1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

​ 2.事件的回调需要配置在methods对象中，最终会在vm上；

​ 3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；

​ 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；

​ 5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

Vue中的事件修饰符：

​ 1.prevent：阻止默认事件（常用）；

​ 2.stop：阻止事件冒泡（常用）；

​ 3.once：事件只触发一次（常用）；

​ 4.capture：使用事件的捕获模式；

​ 5.self：只有event.target是当前操作的元素时才触发事件；

​ 6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

1.Vue中常用的按键别名：

​ 回车 => enter

​ 删除 => delete (捕获“删除”和“退格”键)

​ 退出 => esc

​ 空格 => space

​ 换行 => tab (特殊，必须配合keydown去使用)

​ 上 => up

​ 下 => down

​ 左 => left

​ 右 => right

​ 2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

​ 3.系统修饰键（用法特殊）：ctrl、alt、shift、meta

​ (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

​ (2).配合keydown使用：正常触发事件。

​ 4.也可以使用keyCode去指定具体的按键（不推荐）

​ 5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

计算属性：

​ 1.定义：要用的属性不存在，要通过已有属性计算得来。

​ 2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

​ 3.get函数什么时候执行？

​ (1).初次读取时会执行一次。

​ (2).当依赖的数据发生改变时会被再次调用。

​ 4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

​ 5.备注：

​ 1.计算属性最终会出现在vm上，直接读取使用即可。

​ 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

​ 3.get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。

监视属性watch：

​ 1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

​ 2.监视的属性必须存在，才能进行监视！！

​ 3.监视的两种写法：

​ (1).new Vue时传入watch配置

​ (2).通过vm.$watch监视

深度监视：

​ (1).Vue中的watch默认不监测对象内部值的改变（一层）。

​ (2).配置deep:true可以监测对象内部值改变（多层）。

​ 备注：

​ (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

​ (2).使用watch时根据数据的具体结构，决定是否采用深度监视。

computed和watch之间的区别：

​ 1.computed能完成的功能，watch都可以完成。

​ 2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作，computed不能。

​ 两个重要的小原则：

​ 1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。

​ 2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，

​ 这样this的指向才是vm 或 组件实例对象。

绑定样式：

​ 1. class样式

​ 写法:class=“xxx” xxx可以是字符串、对象、数组。

​ 字符串写法适用于：类名不确定，要动态获取。

​ 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

​ 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

​ 2. style样式

​ :style="{fontSize: xxx}"其中xxx是动态值。

​ :style="[a,b]"其中a、b是样式对象。

条件渲染：

​ 1.v-if

​ 写法：

​ (1).v-if=“表达式”

​ (2).v-else-if=“表达式”

​ (3).v-else=“表达式”

​ 适用于：切换频率较低的场景。

​ 特点：不展示的DOM元素直接被移除。

​ 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

​ 2.v-show

​ 写法：v-show=“表达式”

​ 适用于：切换频率较高的场景。

​ 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

​ 3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

v-for指令:

​ 1.用于展示列表数据

​ 2.语法：v-for="(item, index) in xxx" :key=“yyy”

​ 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

面试题：react、vue中的key有什么作用？（key的内部原理）

​ \1. 虚拟DOM中key的作用：

​ key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,

​ 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

​ 2.对比规则：

​ (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

​ ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

​ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

​ (2).旧虚拟DOM中未找到与新虚拟DOM相同的key

​ 创建新的真实DOM，随后渲染到到页面。

​ \3. 用index作为key可能会引发的问题：

​ \1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:

​ 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

​ \2. 如果结构中还包含输入类的DOM：

​ 会产生错误DOM更新 ==> 界面有问题。

​ \4. 开发中如何选择key?:

​ 1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

​ 2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，

​ 使用index作为key是没有问题的。