Vue2.（Vue的指令和数据代理原理，数据监测）
目录
vue 的两个特性
数据驱动视图：
双向数据绑定：
3.vue的基本使用
vue 指令
1. 内容渲染指令（v-text，{{ }}，v-html）
2. 属性绑定指令（v-bind:，简写 :）
绑定样式
2.1. class样式写法:
2.2. style样式
3.事件绑定指令（v-on:，简写 @）
3.1事件对象$event
3.2事件修饰符：
3.3按键修饰符：（@keyup.esc，@keyup.enter）
4.双向绑定指令（v-model）
4.1v-model的修饰符（.number，.trim，.lazy）
5.条件渲染指令（v-if，v-else，v-else，v-show，）
5.1.v-if 和v-show 的区别
6.列表（循环）渲染指令（v-for）
6.1key 的注意事项
6.2 label的for属性
6.3key的内部原理
7.v-cloak指令（防止闪现, 与 css 配合: [v-cloak] { display: none }）
8.v-once指令（初次动态渲染后不再改变）
9.v-pre指令（被该指令用的vue不会去解析它）
列表案例
Vue中的数据代理
1.Object.defineProperty方法
2.数据代理：通过一个对象代理对另一个对象中属性的操作
3.Vue的数据代理
Vue的数据监测
1. vue会监视data中所有层次的数据。
2. 如何监测对象中的数据？
3. 如何监测数组中的数据？
4.在Vue修改数组中的某个元素一定要用如下方法：
vue 的两个特性
-
数据驱动视图：
-
数据的变化会驱动视图自动更新
-
好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！
-
-
双向数据绑定：
在网页中，form 表单负责采集数据，Ajax 负责提交数据。
-
js 数据的变化，会被自动渲染到页面上
-
页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中
-
注意：数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel 就是 vue 的实例）
ViewModel 作为 MVVM 的核心 ，是它把当前页面的 数据源 （ Model ）和 页面的结构 （ View ）连接在了一起。当 数据源发生变化 时，会被 ViewModel 监听到， VM 会根据最新的数据源 自动更新 页面的结构当 表单元素的值发生变化 时，也会被 VM 监听到， VM 会把变化过后最新的值 自动同步 到 Model 数据源中
3.vue的基本使用
- ①导入vue.js 的script 脚本文件
- ②在页面中声明一个将要被vue 所控制的DOM 区域
- ③创建vm 实例对象（vue 实例对象）
{{username}}
vue 指令
1. 内容渲染指令（v-text，{{ }}，v-html）
v-text指令的缺点：会覆盖元素内部原有的内容！
{{ }}插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
v-html指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！
性别:
姓名：{{username}}
性别：{{gender}}
{{info}}
2. 属性绑定指令（v-bind:，简写 :）
注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！
-
在 vue 中，可以使用
v-bind:指令，为元素的属性动态绑定值； -
简写是英文的
: -
在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：
这是一个 div
![]()
1+2的结果是：{{1+2}}
{{ tips }}反转后的结果是：{{ tips.split('').reverse().join('')}}
这是一个div
绑定样式
2.1. class样式写法:
-
class="xxx" xxx可以是字符串、对象、数组。
-
字符串写法适用于：类名不确定，要动态获取。
- 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
- 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2.2. style样式
:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
data:{
name:'迪丽热巴',
mood:'normal',
classArr:['atguigu1','atguigu2','atguigu3'],
classObj:{
atguigu1:false,
atguigu2:false,
},
styleObj:{
fontSize: '40px',
color:'red',
},
styleObj2:{
backgroundColor:'orange'
},
styleArr:[
{
fontSize: '40px',
color:'blue',
},
{
backgroundColor:'gray'
}
]
},3.事件绑定指令（v-on:，简写 @）
-
v-on:简写是@ -
语法格式为：
methods: {
add() {
// 如果在方法中要修改 data 中的数据，
//可以通过 this 访问到
this.count += 1
}
}
count 的值是：{{count}}
3.1事件对象$event
$event 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：
methods: {
add(n, e) {
// 如果在方法中要修改 data 中的数据，可以通过 this 访问到
this.count += 1
}
}
count的值是：{{count}}
3.2事件修饰符：
-
.prevent链接
-
.stop
3.3按键修饰符：（@keyup.esc，@keyup.enter）
4.双向绑定指令（v-model）
用户的名字是：{{username}}
4.1v-model的修饰符（.number，.trim，.lazy）
+={{n1+n2}}
5.条件渲染指令（v-if，v-else，v-else，v-show，）
- v-if
- v-show
5.1.v-if 和v-show 的区别
- v-if 指令会动态地创建或移除DOM 元素，从而控制元素在页面上的显示与隐藏；
- v-show 指令会动态为元素添加或移除style="display: none;" 样式，从而控制元素的显示与隐藏；
- 如果需要非常频繁地切换，则使用v-show 较好
- 如果在运行时条件很少改变，则使用v-if 较好
这是被v-if控制的元素
这是被v-show控制的元素
优秀
良好
一般
差
6.列表（循环）渲染指令（v-for）
- items 是待循环的数组
- item 是被循环的每一项
- 当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。
- 为了给vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的key 属性：
6.1key 的注意事项
- ①key 的值只能是字符串或数字类型
- ②key 的值必须具有唯一性（即：key 的值不能重复）
- ③建议把数据项id 属性的值作为key 的值（因为id 属性的值具有唯一性）
- ④使用index 的值当作key 的值没有任何意义（因为index 的值不具有唯一性）
- ⑤建议使用v-for 指令时一定要指定key 的值（既提升性能、又防止列表状态紊乱）
索引
ID
姓名
{{index}}
{{item.id }}
{{item.name}}
6.2 label的for属性
for的值等于checkbox的id属性进行绑定，可以实现点击标签label也能改变checkbox状态
6.3key的内部原理
面试题：react、vue中的key有什么作用？（key的内部原理）
1. 虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
2.对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
- ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
- ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。
3. 用index作为key可能会引发的问题：
- 若对数据进行：逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
- 如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。
4. 开发中如何选择key?:
- 1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
- 2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示， 使用index作为key是没有问题的。
7.v-cloak指令（防止闪现, 与 css 配合: [v-cloak] { display: none }）
本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
{{name}}
8.v-once指令（初次动态渲染后不再改变）
- 1.v-once所在节点在初次动态渲染后，就视为静态内容了。
- 2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
初始化的n值是:{{n}}
当前的n值是:{{n}}
9.v-pre指令（被该指令用的vue不会去解析它）
- 1.跳过其所在节点的编译过程。
- 2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
Vue其实很简单
当前的n值是:{{n}}
列表案例
品牌列表案例
添加品牌
#
品牌名称
状态
创建时间
操作
{{ item.id }}
{{ item.name }}
{{ item.time }}
删除
Vue中的数据代理
1.Object.defineProperty方法
/* 双向绑定原理数据劫持 v-model */
let number = 18
let person = {
name:'张三',
sex:'男',
}
Object.defineProperty(person,'age',{
// value:18,
// enumerable:true, //控制属性是否可以枚举，默认值是false
// writable:true, //控制属性是否可以被修改，默认值是false
// configurable:true //控制属性是否可以被删除，默认值是false
//当有人读取person的age属性时，
get函数(getter)就会被调用，
且返回值就是age的值
get(){
console.log('有人读取age属性了')
return number
},
//当有人修改person的age属性时，
set函数(setter)就会被调用，且会收到修改的具体值
set(value){
console.log('有人修改了age属性，且值是',value)
number = value
}
})
// console.log(Object.keys(person))
console.log(person)
2.数据代理：通过一个对象代理对另一个对象中属性的操作
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})3.Vue的数据代理
- Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
- Vue中数据代理的好处：
更加方便的操作data中的数据
- 基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
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的根数据对象 添加属性！！！