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 的两个特性

1. 数据驱动视图：

   • 数据的变化会驱动视图自动更新

   • 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！

2. 双向数据绑定：

   在网页中，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）

1. v-text 指令的缺点：会覆盖元素内部原有的内容！

2. {{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！

3. 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:，简写 @）

1. v-on: 简写是 @

2. 语法格式为：

methods: {
   add() {
            // 如果在方法中要修改 data 中的数据，
            //可以通过 this 访问到
            this.count += 1
   }
}

    

        
        
count 的值是：{{count}}
        
        
        
        +1
        -1
    


    
    

3.1事件对象$event

$event 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：

methods: {
   add(n, e) {
            // 如果在方法中要修改 data 中的数据，可以通过 this 访问到
            this.count += 1
   }
}

    

        
count的值是：{{count}}
        
        
        +N
    
    
    

3.2事件修饰符：

• .prevent

  链接

• .stop

  按钮

    

        
 跳转到百度页面

        


      按钮
        
    
    
    

3.3按键修饰符：（@keyup.esc，@keyup.enter）

4.双向绑定指令（v-model）

vue 提供了 v-model 双向数据绑定 指令，用来辅助开发者在 不操作 DOM 的前提下， 快速获取表单的数据 。

    
    

        
用户的名字是：{{username}}
        
        

        
        

        
          请选择城市
          北京
          上海
          广州
        
    
    
    

4.1v-model的修饰符（.number，.trim，.lazy）

    
    

        
        +={{n1+n2}}
        

        
        
        获取用户名
        

        
        
    
    
    

5.条件渲染指令（v-if，v-else，v-else，v-show，）

条件渲染指令用来辅助开发者按需控制DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

• v-if
• v-show

5.1.v-if 和v-show 的区别

实现原理不同：

• v-if 指令会动态地创建或移除DOM 元素，从而控制元素在页面上的显示与隐藏；
• v-show 指令会动态为元素添加或移除style="display: none;" 样式，从而控制元素的显示与隐藏；

性能消耗不同：

v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此：

• 如果需要非常频繁地切换，则使用v-show 较好
• 如果在运行时条件很少改变，则使用v-if 较好

    
    


        
        
这是被v-if控制的元素

        
        
这是被v-show控制的元素

        

        
优秀
        
良好
        
一般
        
差
    
    
    

6.列表（循环）渲染指令（v-for）

vue 提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使

用item in items 形式的特殊语法，其中：

• items 是待循环的数组
• item 是被循环的每一项

v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为(item,index)in items

注意：v-for 指令中的item 项和index 索引都是形参，可以根据需要进行重命名。例如(user,i)in userlist

• 当列表的数据变化时，默认情况下，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}}
			点我n+1
		

9.v-pre指令（被该指令用的vue不会去解析它）

• 1.跳过其所在节点的编译过程。
• 2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

		

			
Vue其实很简单
			
当前的n值是:{{n}}
			点我n+1
		

列表案例

    
    
    




    

        
        

            

                添加品牌
            
            

                
                
                

                    

                        

                            

                                

                                    
品牌名称
                                
                                
                            
                        
                        

                            添加
                        
                    
                
            
        

        
        

            

                

                    
#
                    
品牌名称
                    
状态
                    
创建时间
                    
操作
                
            
            

                

                    
{{ 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的根数据对象 添加属性！！！