vue学习笔记（三）--来源尚硅谷《监视属性、绑定样式、条件渲染、列表渲染》
九、监视属性
9.1、天气案例
点击查看代码
天气案例
今天天气很{{info}}
9.2、天气案例_监视属性
监视属性watch：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
点击查看代码
今天天气很{{info}}
9.3、天气案例_深度监视
深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（仅一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
点击查看代码
今天天气很{{info}}
a的值是:{{numbers.a}}
b的值是:{{numbers.b}}
{{numbers.c.d.e}}
9.4、天气案例_监视属性—简写
点击查看代码
今天天气很{{info}}
9.5、天气案例_watch实现
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或 组件实例对象。
点击查看代码
姓：
名：
全名：{{fullName}}
十、绑定样式
绑定样式： 1. class样式 写法:class="xxx" xxx可以是字符串、对象、数组。 字符串写法适用于：类名不确定，要动态获取。 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。 2. style样式 :style="{fontSize: xxx}"其中xxx是动态值。 :style="[a,b]"其中a、b是样式对象。点击查看代码
绑定样式
{{name}}
{{name}}
{{name}}
{{name}}
{{name}}
十一、条件渲染
条件渲染： **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一定可以获取到。
点击查看代码
条件渲染
当前的n值是:{{n}}
你好
尚硅谷
北京
十二、列表渲染
12.1、基本列表
v-for指令: 1.用于展示列表数据 2.语法：v-for="(item, index) in xxx" :key="yyy" 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）点击查看代码
人员列表（遍历数组）
-
{{p.name}}-{{p.age}}
汽车信息（遍历对象）
-
{{k}}-{{value}}
测试遍历字符串（用得少）
-
{{char}}-{{index}}
测试遍历指定次数（用得少）
-
{{index}}-{{number}}
12.2、key的原理
面试题：react、vue中的key有什么作用？（key的内部原理）
- 虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
2.对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。 - 用index作为key可能会引发的问题：
- 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。 - 如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。 - 开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
12.3、列表过滤
点击查看代码
人员列表
-
{{p.name}}-{{p.age}}-{{p.sex}}
12.4、列表排序
点击查看代码
人员列表
-
{{p.name}}-{{p.age}}-{{p.sex}}
12.5、更新时的一个问题
点击查看代码
人员列表
-
{{p.name}}-{{p.age}}-{{p.sex}}
>
12.6、Vue监测数据改变的原理
点击查看代码
学校名称：{{name}}
学校地址：{{address}}
12.7、模拟一个数据监测
点击查看代码
12.8、Vue.set的使用
点击查看代码
学校信息
学校名称：{{school.name}}
学校地址：{{school.address}}
校长是：{{school.leader}}
学生信息
姓名：{{student.name}}
性别：{{student.sex}}
年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}
朋友们
-
{{f.name}}--{{f.age}}
12.9、Vue监测数据改变的原理_数组
点击查看代码
学校信息
学校名称：{{school.name}}
学校地址：{{school.address}}
校长是：{{school.leader}}
学生信息
姓名：{{student.name}}
性别：{{student.sex}}
年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}
爱好
-
{{h}}
朋友们
-
{{f.name}}--{{f.age}}
12.10、总结数据监视
Vue监视数据的原理： 1. vue会监视data中所有层次的数据。 2. 如何监测对象中的数据？ 通过setter实现监视，且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性，Vue默认不做响应式处理 (2).如需给后添加的属性做响应式，请使用如下API： Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value) 3. 如何监测数组中的数据？ 通过包裹数组更新元素的方法实现，本质就是做了两件事： (1).调用原生对应的方法对数组进行更新。 (2).重新解析模板，进而更新页面。 4.在Vue修改数组中的某个元素一定要用如下方法： 1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse() 2.Vue.set() 或 vm.$set() 特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！点击查看代码
学生信息
姓名：{{student.name}}
年龄：{{student.age}}
性别：{{student.sex}}
爱好：
-
{{h}}
朋友们：
-
{{f.name}}--{{f.age}}