1、计算属性是基于它们的响应式依赖进行缓存的
2、计算属性
3、watch
image.png
watch：一个数据影响多个数据；computed：多个数据影响一个数据。
4、class与style的绑定
<div class="oneClass" :class="{'twoClass':ifTwo,'threeClass':ifThree}"></div>
ifTwo:true,
ifThree:false
——>
<div class="oneClass twoClass"></div>
5、用key管理可复用的元素
6、v-for就地更新
diff算法
7、v-for也可接受整数
8、数组方法
forEach：相当于for循环，不会返回任何值，会影响原来的数组
map：映射数组，修改数组其中的数据，并返回一个新的数组
Array.from() 伪数组->数组
Array.of() 一组值转换成数组（类似于声明数组）
arr.copyWithin(x,y,z)->x:必选，索引从此位置开始替换；
9、表单元素的修饰符相关
.lazy：v-model与change事件时同步，而非input事件
.number：将输入的值转成数值类型
.trim：过滤输入的首尾空白字符
10、组件的data必是函数，可以独立使用
image.png
prop是单向下行绑定，对象或数组默认值必须从一个工厂函数获取。
11、插槽
image.png
具名插槽：
image.png
image.png
作用域插槽的使用
slot-scope（前用法）
子组件childComponent：
<slot name="wangs"></slot>
父组件中：
<child-component slot-scope="scope">{{scope.data}}</child-component>
// scope.data的值就是子组件中name的值——'wangs'
v-slot（现用）
子组件childComponent：
<slot name="wangs"></slot>
父组件中：
<child-component v-slot="scope">{{scope.data}}</child-component>
// scope.data的值就是子组件中name的值——'wangs'
