一，vue核心属性
1，计算属性
在vue实例的data中，里面的key值就是属性名，里面的value就是属性值，而这个计算属性，就是用来对data中的数据进行一个属性计算的，将里面的数据进行一个加工操作，生成一个全新的数据。计算属性的数据通过这个computed保存。
new Vue({ data:{firstName:'郑',lastName'三'}, computed:{ fullName:{ //当有人读取这个fullName时，get就会被调用，且返回值就作为fullName的值 get(){ return this.firstName + '-' + this.lastName; } } } })
并且在这个fullName中的get()函数，会做一个缓存。并且只有在第一次读取这个fullName时，或者所需要的data中的数据发生变化时，这个get方法才会发生调用，之后再有的别人来读取这个fullName的值的时候，就直接读取缓存中的值了。
只有在这个computed中会有缓存，在methods中是没有缓存中。computed的底层主要是通过数据代理，通过其底层的getter和setter来实现的。
以上部分也可以直接对 fullName 这一部分做一个简写，直接写成如下部分，并且只有在只做获取，不做修改时才能简写成以下部分。但是需要切记的是这个fullName的值可以由这个vue实例直接获取到，而不是获取一个函数。
fullName(){ return this.firstName + '-' + this.lastName; }
2，监视属性
使用watch关键字，对data中的数据进行监听，除了可以监听data中的数据，也可以监听计算属性中的值。在数据发生改变时，handler这个监听方法就会被触发。
new Vue({ data:{isHot:true}, watch:{ //监视data中的isHot属性 isHot:{ immediate：true,//初始化这个handler时调用一下 handler(newVlaue,oldVlaue){ console.log('isHot被修改了',newVlaue,oldVlaue) } } } })
如果需要监视多级结构中的属性变化，那么需要加入一个属性deep，这样主要该结构中的任意一个数据发生变化，就会触发这个handler函数。
deep:true
如果不需要这个deep和这个immediate属性，那么可以将这个isHot属性进行一个简写操作，如下
isHot(newVlue,oldValue){ console.log('isHot被修改了',newVlaue,oldVlaue) }
在既可以用监视属性，又可以用计算属性完成某个功能时，当面临这个异步事件的时候，优先使用监视属性；除此之外，可以优先使用计算属性。
3，样式绑定
3.1，class样式绑定
对于确定的样式，可以直接使用这个class来直接绑定，对于这个不确定的样式使用 :class 双向绑定来确定
<!-- 绑定class样式，字符串写法 --> <div class="basic" :class="mood">{{name}}</div> <!-- 绑定class样式，数组写法 --> <div class="basic" :class="dataArr">{{name}}</div> <!-- 绑定class样式，对象写法 --> <div class="basic" :class="dataObj">{{name}}</div>
3.2，style样式绑定
除了可以使用绑定这个class，也可以手动的写这个style
<!-- 绑定对象的写法 --> <div class="basic" :style="styleObj1">{{name}}</div> <!-- 绑定数组的写法 --> <div class="basic" :style="styleArr">{{name}}</div>
其实例中的data属性如下
styleObj1:{ fontSize: '40px', color: 'red, backgroudColor: 'orange' } styleObj2...
4，条件渲染
顾名思义就是说，满足什么条件，就渲染对应的东西。 如下可以使用这个v-show这个指令来实现，其底层主要是操作这个dispaly这个指令，当为true时该结点展示，当为false时该结点隐藏。
v-show="true"
除了这个v-show，也可以使用这个v-if来实现条件渲染。但是如果直接使用v-if，其底层会直接将该结点删除，而不是隐藏，如果要显示的话，那么就得重新添加一个结点。
v-if = "true"
因此在选择中，如果切换的频率高的话建议使用v-show，如果切换的很低的话可以选择v-if。如果在切换的频率很高的情况使用这个v-if，那么就会进行大量的增加和删除结点，在一定程度上会影响一定的效率。
而在选择这个v-if的时候，除了使用这个v-if，也会使用这个v-else-if，v-else，可以三个结合一起使用。
v-if = "n===1" v-else-if = "n===2" v-else
并且在这几个结合体中，不允许出现中断操作，即这几个指令要结合并且连在一起使用。
5，列表渲染
5.1，遍历列表
主要使用这个v-for来表示，其内部就类似于一个for循环，然后遍历一个数组。并且为了保证数组中每一条数据的唯一性，最好加一个key标识，并且这个key使用每一条元素中的id。除了数组，对象，字符串等都是可以直接进行遍历的。
<div id="root"> <h2>人员列表</h2> <ul> <li v-for = "(p,index) in persons" :key = p.id> {{p.name}} - {{p.age}} </li> </ul> </div> //在vue实例的data中的数据如下 data:{ persons:[ {"id":001,name:'张三',age:18,}, {"id":002,name:'李四',age:19,}, {"id":003,name:'王五',age:20,} ] }
5.2，key的作用
在这个虚拟dom中，有一个diff的高效的比较算法，而在该算法中，需要利用上这个key。因此在对这个key进行一个值的赋予时，优先选择一个唯一的id，如后台给的id或者index下标，如果不涉及到列表的更新的话，那么这两个都可以使用，如果涉及到这个列表更新的话，那么只考虑使用这个唯一id。
使用index作为key，就会出现如下情况。input输入框的数据发生错乱，并且需要重新生成多个虚拟dom，效率相对而言较底下，并且渲染之后的界面直接出现问题
使用唯一id，只要重新生成一个新增数据对应的虚拟dom即可，而原先的虚拟dom以及对应的数据可以直接进行一个复用操作。
5.3，key的作用
key是虚拟DOM的标识，当数据发生变化的时候，Vue会根据新数据生成新的虚拟DOM，随后新旧虚拟DOM会进行一个比较操作
新旧虚拟DOM的比较规则如下：
1，若旧虚拟DOM找到了与新虚拟DOM中相同的key
若虚拟DOM中内容没变，直接使用之前的真实DOM
若虚拟DOM中的内容变了，则重新生成新的真实DOM
2，旧虚拟DOM未找到与新虚拟DOM相同的key
直接创建新的真实DOM，随后渲染到页面上
所以在开发中，建议直接选择唯一标识，如后台返回的id，手机号，身份证号等唯一值。
5.4，列表过滤
可以直接使用关键字filter对列表中的数据进行一个过滤，如上面的这个person数组，将年级大于18的所有数据给过滤出来。
this.persons.filter((p)=>{ return p.age > 18; })
5.5，列表排序
在数据过滤时，往往也需要对数据进行一个排序操作。接下来模拟一个根据年龄进行排序的实现，如下：
this.persons.sort((p1,p2) =>{ //sortType：: 1,升序 2，降序 return sortType === 1 ? p1.age - p2.age : p2.age-p1.age; })
6，Vue.set() 的使用
可以通过这个vue.set将后来加入的值变成响应式，使其后边加入的值变成有setter和getter两个构造函数。
//向student这个对象中加入sex这个性别以及对应的值 //如果实在methods中，则可以直接使用this即可 Vue.set(vm.student,'sex','男')
也可以使用vm.$set ，其效果和这个Vue.set() 一样
vm.$set(vm.student,'sex','女')
并且在添加属性时，这个第一个参数不能为Vue的实例对象或者根数据对象，只能是vm对象里面的属性。
7， Vue监测数组中数据改变的原理
vue在使用数组时，只有在以下方法中才能触发视图更新的操作。并且一下七个方法是经过了Vue包裹的几个方法
push() pop() shift() unshift() splice() sort() reverse()
当然除了上面的七个方法，也可以使用6中的这个set方法，对里面的值进行设置或者添加。
// 对hobby数组中的第一个数据改成打篮球 Vue.set(vm.student.hobby,0,'打篮球')
7.1，监测数据操作总结如下。
<body> <!-- 一个容器,可以用于接收vue实力传来的数据，然后展示 --> <div id="root" aglian> <h2>学生信息</h2> <button @click="student.age++" >年龄+1岁</button> </br></br> <button @click="addSex()" >添加性别属性，默认值男</button> </br></br> <button @click="addFriend" >在列表首位添加一个朋友</button> </br></br> <button @click="updateFirstFriendName" >修改第一个朋友的名字为张三</button> </br></br> <button @click="addHobby" >添加一个爱好</button> </br></br> <button @click="UpdateFirstHobby" >修改第一个爱好为：开车</button> </br></br> <h1>姓名：{{student.name}}</h1> <h2>年龄：{{student.age}}</h2> <!-- v-if也可以 --> <h2 v-show="student.sex">性别：{{student.sex}}</h2> <h2>学生爱好</h2> <ul> <li v-for = "(p,index) in student.hobby" :key = p.id> {{p}} </li> </ul> <h2>朋友们</h2> <ul> <li v-for = "(p,index) in student.friends" :key = p.id> {{p.name}} - {{p.age}} </li> </ul> </div> <script type="text/javascript" > Vue.config.productionTip = false //阻止vue启动时提示生产提示 new Vue({ //指定当前实例为哪个容器服务，id对应#，class对应. el:'#root', //data用于存储数据，只有el对应的容器可以使用 data:{ student:{ name:'tom', age:18, hobby:['打篮球','看书','跑步'], friends:[ {name:'zhs',age:19}, {name:'lisi',age:20}, ] } }, methods:{ addSex(){ Vue.set(this.student,'sex','男'); }, addFriend(){ // 只要用了那七个包装的方法，修改的值就可以变成响应式 this.student.friends.unshift( {name:'Jack',age:21}); }, updateFirstFriendName(){ // 没有set和get的属性都不是响应式，修改值时vue不认 // 数组没有setter和getter，但是数组中的属性是有setter和getter的 this.student.friends[0].name = '张三'; }, addHobby(){ this.student.hobby.push('画画'); }, UpdateFirstHobby(){ //Vue.set(this.student.hobby,0,'开车') this.$set(this.student.hobby,0,'打羽毛球') } } }) </script> </body>
7.2，数据监测原理总结如下
1，Vue会监视data中所有层次的数据
2，监测对象中的数据如下
通过setter实现监视，且要在new Vue时就要传入要监测的数据
(1)对象中后追加的属性，Vue默认不做响应式处理
(2)如需给后添加的属性做响应式，可以使用如下两种方式
Vue.set(target,propertyName/index,value)或 vm.$set(target,propertyName/index,value)
3，监测数组中的数据
通过包裹数组更新元素的方法实现，本质就是做了两件事
(1).调用原生对应的方法对数组进行更新
(2).重新解析模板，进而更新页面
4，Vue修改数组中的某个元素
(1)使用上面七个封装后的方法
(2)使用Vue.set()或者 vm.$set()
特别注意：Vue.set()或者 vm.$set()不能给vm或者vm的根数据对象添加属性
(2)如需给后添加的属性做响应式，可以使用如下两种方式
Vue.set(target,propertyName/index,value)或 vm.$set(target,propertyName/index,value)
3，监测数组中的数据
通过包裹数组更新元素的方法实现，本质就是做了两件事
(1).调用原生对应的方法对数组进行更新
(2).重新解析模板，进而更新页面
4，Vue修改数组中的某个元素
(1)使用上面七个封装后的方法
(2)使用Vue.set()或者 vm.$set()
特别注意：Vue.set()或者 vm.$set()不能给vm或者vm的根数据对象添加属性
