vue的笔记（1）https://developer.aliyun.com/article/1530392
1.8 计算属性
1.定义:要用的属性不存在，要通过已有属性计算得来。
2.原理:底层借助了objcet.defineproperty方法提供的getter和setter.
3.get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。5.备注:
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
简写
1.9监视属性
const vm = new Vue({el: " #root', data:{ isHot:true,}, computed:{ …methods: {…watch:{ isHot:{ immediate:true, //c初始化时让handler调用一下 // handler什么时候调用?当isHot发生改变时。 handler(newValue,oldValue){ console.1og('isHot被修改了" ,newValue,oldvalue} } } } )
vm.$watch( 'isHot",{ immediate:true，//初始化时让handler调用一下l/ handler什么时候调用?当isHot发生改变时。handler(newValue,oldvalue){ console.log( 'isHot被修改了',newValue,oldValue)} })
1.9.2深度监视
深度监视:
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。备注:
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构，决定是否采用深度监视
简写
1.10 watch对比computed
computed和lwatch之间的区别:
1.computed能完成的功能,watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。两个重要的小原则:
1.所被Vue管理的函数==(外面是windows)，最好写成普通函数，这样this的指向才是vm或组件实例对象。
⒉.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数)，最好写成箭头函数(外面是vue)==，这样this的指向才是vm或组件实例对象。
箭头函数this等于父级函数this指向，下面的定时器必须用箭头函数，不能用普通函数。
如果定时器中的回调函数使用的是箭头函数，则会往上一级函数中去寻找this
setTimeout的系统调用的所以里面的this是windows
1.11绑定样式
绑定class样式
:class后面的式子当做表达式使用
<div id="root"> <div class="basic" :class="happy" @click="changeMood">{{name}}</div> </div> </body>
<!--准备好一个容器--><div id="root"> <!--绑定class样式--字符串写法，适用于:样式的类名不确定，需要动态指定--> <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br/><br/> <!--绑定class样式--数组写法，适用于:要绑定的样式个数不确定、名字也不确定--> <div class="basic" :class="classArr">{{name}}</div> <br/><br/> <!--绑定class样式--对象写法，适用于:要绑定的样式个数确定、名字也确定，但要动态决定用不用--> <div class="basic" :class="class0bj">{{name}}</div> </div>
绑定style样式
1.12条件渲染
v-show
条件为false隐藏
v-if
条件为false直接就没有
v-else-if
v-else
连在一起使用不能被打断
template 不影响结构
1.13列表渲染
遍历数组
<div id="root"><h2>人员列表</h2><ul> <li v-for="p in persons" :key="p.id">{ip.name}}-{{p.age}} </li> </ul></div>
data:{ persons:[ {id: '001" ,name:"张三",age:18}, {id: "002 " ,name:"李四",age: 19}, {id: "003" ,name:'王五',age:20}] }
每个列表项都会自动分配相应顺序的index代表遍历时的索引值
<div id="root"> <h2>人员列表</h2> <ul> <li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}} </li> </ul></div>
遍历对象
data里面的一个car对象
car:{ name:'奥迪A8', price: '70万', color:'黑色' }
<ul> <li v-for=" (value,k) of car" :key="k"> {{k}}-{{value}} </li> </ul>
遍历字符串
str : ' hello'
<ul> <li v-for="(char,index) of str":key="index> {{a}}-{{b}} </li> </u1>
遍历指定次数
1.14key的作用与原理
1。虚拟DOM中key的作用:
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DoN》,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下:
2.对比规则:
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
o.若虚拟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是没有问题的。
1.14 列表渲染
用watch实现
new Vue({ el : " #root', data:{ keyword: ' ', persons:[ {id: "001 " ,name:'马冬梅',age: 19,sex :'女'}, {id: '062 " ,name:"周冬雨",age: 20,sex :'女'}, {id: '003" ,name:"周杰伦',age:21,sex:"男"}, {id: "004" ,name:温兆伦',age:22,sex:"男}], filPerons:[] }, watch:{keyword:{ immediate:true, handler(val){ this.filPerons = this.persons.filter((p)=>{ return p.name.indexOf(val) l== -1 }) }}}})
计算属性实现
