前端Vue2笔记第二章

计算属性与监视 计算属性 1. 定义：要显示的数据不存在，要通过已有属性计算得来 2. 原理：底层借助了Object.defineproperty方法提供的getter和setter 3. get函数什么时候执行 1. 初次读取时会执行一次 2. 当依赖的数据发生改变时会被再次调用 4. 优势：与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便 计算属性高级 1. 通过getter/setter实现对属性数据的显示和监视 2. 计算属性存在缓存，多次读取只执行一次getter计算.

监视属性 1. 通过vm对象的$watch()或watch配置来监视指定的属性 2. 当属性变化时，回调函数自动调用，在函数内部进行计算 3. 监视的属性必须存在，才能进行监视。

深度监视 1. Vue中的watch默认不监测对象内部值的改变 2. 配置deep: true可以监测对象内部值的改变 3. Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以 4. 使用watch时根据数据的具体解构，决定是否采用深度监视。

computed和watch之间的区别 1. computed能完成的功能，watch都可以完成 2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作 3. 两个重要的小原则 1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象 2. 所有不被Vue所管理的函数(定时器的回调函数，ajax的回调函数等)，最好写成箭头函数，这 样this的指向才是vm或组件实例对象。

绑定样式 1. class样式 1. 写法 :class='xxx' xxx 可以是字符串，对象，数组 1. 字符串写法适用于：类名不确定，要动态获取 2. 数组写法适用于：要绑定多个样式，个数不确定，名字也不确定 3. 对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. style样式 1. :style="{fontSize: xxx}" 其中xxx是动态值 2. :style="[a,b]" 其中a、b是样式对象

条件渲染 1. v-if 1. v-if="表达式" 2. v-else-if="表达式" 3. v-else="表达式" 4. 适用于：切换频率较低的场景 5. 特点不展示的DOM元素直接被移除 6. v-if可以和v-else-if、v-else一起使用，但要求解构不能被打断，连续写上 2. v-show 1. v-show="表达式" 2. 适用于：切换频率较高的场景 3. 特点：不展示DOM元素未被溢出，仅仅是使用样式隐藏掉。

列表渲染 v-for 指令 1. 用于展示列表数据 2. 语法：v-for="(item, index) in xxx" :key="yyy" 3. 可遍历：数组、对象、字符串(用的很少)、指定次数(用的很少)

[react]、vue中的key有什么作用？(key的内部原理) 1. 虚拟DOM中key的作用 1. key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据[新数据]生成[新的虚拟DOM] 2. 随后vue继行[新虚拟DOM]与[旧虚拟DOM]的差异比较，比较规则如下 2. 对比规则 1. 旧虚拟DOM中找到了与新虚拟DOM相同的key 1. 若虚拟DOM中内容没变，直接使用之前的真实DOM 2. 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换页面中之前的真实DOM 2. 旧虚拟DOM中未找到与新虚拟DOM相同的key 1. 创建新的真实DOM，随后渲染到页面 3. 用index作为key可能会引发的问题 1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作。

1. 会产生没有必要的真实DOM更新 --> 界面效果没问题，但效率低 2. 如果结构中还包含输入类的DOM 1. 会产生错误DOM更新 --> 界面有问题 4. 开发中如何选择key 1. 最好使用每条数据的唯一标识作为key、比如id、手机号、身份证号、学号等唯一值 2. 如果不存在对数据的逆序添加、逆序删除等破坏书匈奴操作、仅用于渲染列表用于展示，使用 index作为key是没有问题

收集表单数据 1. 若： 则v-model收集的是value值，用户输入的就是value值 2. 若： 则v-model收集的是value值，需要给标签配置value值。

3. 若： 1. 没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值) 2. 配置input的value属性 1. v-model的初始值是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值) 2. v-model的初始值就是数组，那么收集的就是value组成的数组 4. v-model的三个修饰符 1. lazy：失去焦点再收集数据 2. number：输入字符串转为有效的数字 3. trim：输入首尾空格过滤。

过滤器 1. 定义：对要显示的数据进行特定格式化后再显示(适用于简单逻辑处理)

2. 语法 1. 注册过滤器：Vue.filter(name, callback) 或 new Vue(filters: {}} 2. 使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名" 比较少用 3. 说明 1. 过滤器也可以接收额外参数，多个过滤器也可以串联 2. 并没有改变原本的数据，是产生新的对应的数据。