【VUE进步之路】使用数据署理，盘算属性与监督属性的妙用

1.数据署理

1.1什么是数据署理

通过一个对象署理对另一个对象中属性的操作（读/写）
1.Vue中的数据署理：通过vm对象来署理data对象中属性的操作（读/写）
2.Vue中数据署理的长处:更加方便的操作data中的数据
3.基本原理:通过0bject . defineProperty( )把data对象中全部属性添加到vm上。为每一一个 添加到vm上的属性，都指定个getter/setter。在getter/setter内部去操作(读/写) data中对应的属性。简单来说就是把data的属性全部都复制给了_data了一份，可以让vm进利用用
1.2了解使用数据署理

Object.defineProperty方法（给对象添加属性方法的一个方法）这个方法会传入三个参数分别是 对象名，属性名，配置项
在这里我们可以看到，这个颜色轻微的长处变化（这里就是使用Object.defineProperty方法举行添加的，这里的age是不可以举行枚举的，即不参与遍历）

1.     <script>
2.     let person = {
3.         name:'大熊'
4.         sex:'男',
5.     }   
6.     Object.defineProperty(person,'address',{
7.         value:18
8.     })
9.     console.log(person);
10.     </script>

复制代码

这里可以使用Object.keys()举行验证一下（并没有age这个属性）（可以看到依然没有age）

固然也可以使用for… in举行遍历一下这个对象

如和才能让他可以被枚举呢？（这里就使用 enumerable 只要将它的值改为true即可）enumerable: true （是否可以被枚举）writable:true（是否可以修改属性）configurable: true（是否可以删除改属性）这四个基本配置项的内容（包罗value）他们的默认值为false

1.     <script>
2.     let person = {
3.         name:'大熊',
4.         sex:'女',
5.     }   
6.     Object.defineProperty(person,'address',{
7.         value:18
8.     })
9.     for(k in person){
10.         console.log(k);
11.     }
12.     console.log(Object.keys(person));
13.     console.log(person);
14.     </script>

复制代码

那标题来了，如何举行对数据的读取和修改呢？这里用到了两个方法，get和set
当有人读取person的age属性时，get函 数(getter)就会被调用，且返回值就是age值
当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具值

1.     <script>
2.         let number = 19;
3.         let person = {
4.             name: '大熊',
5.             sex: '女',
6.         }
7.         Object.defineProperty(person, 'address', {
8.             get() {
9.                 console.log('age属性已被读取');
10.                 return number;
11.             },
12.             set(value) {
13.                 console.log('age属性已被修改');
14.                 number = value
15.             }
16.         })
17.     </script>

复制代码

2. 变乱处理惩罚

1.使用v-on:xxx或@xxx绑定变乱，其中xxx是变乱名
2.变乱的回调须要配置在methods对象中，终极会在vm上
3.methods中配置的函数，不可以使用箭头函数，否则this就不是vm了而是window
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象5.@click="demo"和@click="demo"效果同等，但后者可以传参
注：不要把变乱回调方法data里，虽然可以实现雷同的功能，但是如许会给增加一个数据署理，给一个方法添加数据署理是没有意义的

1. <div id="user">
2.         <h1>{{name}}吃饭了吗？</h1>
3.         <button v-on:click="showPage($event,18)">点击提示</button>
4.         <!-- 第一个参数是event，所以下面的参数顺序要和这里一致 -->
5.     </div>
6.     <script>
7.         let vm = new Vue({
8.             el: '#user',
9.             data: {
10.                 name: '山鱼',
11.             },
12.             methods: {
13.                 // 在这里配置各种事件回调
14.                 showPage(event, number) {
15.                     alert('山鱼吃饭了！')
16.                     console.log(number);
18.                 }
19.             }
20.         })
21.     </script>

复制代码

2.1变乱修饰符

1.prevent:阻止默认变乱(常用）
2.stop: 阻止变乱冒泡(常用)
3.once:变乱只触发一次(常用)
4.capture: 使用变乱的捕获模式
5.self: 只有event.target是当前操作的元素是才触发变乱;
6.passive: 变乱的默认举动立刻实行，无需等候变乱回调实行完毕;

1. <div id="user">
2.         <h1>欢迎来到{{name}}的小屋</h1>
3.         <!-- 1，阻止默认事件 -->
4.         <a href="http://baidu.com" @click.prevent = "showInfo">点我不跳转</a>
5.         <!-- 2，阻止事件冒泡 -->
6.         <div class="one" @click = 'showInfo'>
7.             <button @click.stop = 'showInfo'>点我</button>
8.         </div>
9.         <!-- 3,事件只触发一次 -->
10.         <button @click.once = 'showInfo'>只能点一次</button>
11.     </div>
12.     <script>
13.     const vm = new Vue({
14.         el:'#user',
15.         data:{
16.             name:'大熊',
17.         },
18.         methods:{
19.             showInfo(e){
20.                 alert('同学，慢走！')
21.             }
22.         }
23.     })
24.     </script>

复制代码

2.2键盘变乱

常用的按键别名
回车=> enter，删除=>delete(捕获“删除”和“退格”键)，退出=> esc，空格=> space，上=>up，下=> down，左=> left，右=> right
特殊的按键别名
1.换行=> tab (特殊，必须配合keydown使用)
2.体系修饰键 ctrl，alt，shift，meta（meta就是win键也就是windows徽标）
注：
(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后开释其他键，变乱才被触发。
(2).配合keydown使用:正常触发变乱。

1. <div class="user">
2.         <h1>欢迎加入{{uname}}</h1>
3.         <!--.enter 就是按下回车触发事件，也成为按键别名-->
4.         <input type="text" placeholder="按下回车提示输入" @keyup.enter = 'showInfo'>
5.         <!--删除 del -->
6.         <input type="text" placeholder="按下del提示输入" @keyup.delete = 'showInfo'>
7.         <!-- 退出esc -->
8.         <input type="text" placeholder="按下ESC提示输入" @keyup.esc = 'showInfo'>
9.         <!-- 特殊按键别名 -->
10.         <input type="text" placeholder="一同按下ctrl+‘其他按键’并释放提示输入" @keyup.ctrl = 'showInfo'>
11.         <!-- 自定义别名 -->
12.         <input type="text" placeholder="按下回车提示输入" @keyup.huiche = 'showInfo'>
13.     </div>
14.     <script>
15.         // 也可以自定义按键别名
16.         Vue.config.keyCodes.huiche = 13;
17.         const vm = new Vue({
18.         el:'.user',
19.         data:{
20.             uname:'山鱼社区'
21.         },
22.         methods:{
23.             showInfo(e){
24.                 console.log(e.target.value);
25.             }
26.         }
27.     })
28.     </script>

复制代码

3.盘算属性

1.定义: 要用的属性不存在，要通过已有属性盘算得来。
2.原理:底层借助了objcet . defineproperty方法提供的getter和Isetter.
3. get函数什么时间实行?
(1).初次读取时会实行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.上风:与jmethods 实现相比，内部有缓存机制(复用)，服从更高，调试方便。
5.注:
1.盘算属性终极会出现在:vm上，直接读取使用即可。
2.如果i盘算属性要被修改，那必须写set函数去相应修改，且set中要引起盘算时依赖的数据发发生变化
3.盘算属性内不可以或许开启异步使命（如：定时器）

1. <body>
2.     <!-- 容器 -->
3.     <div class="user">
4.         姓：<input type="text" v-model="firstName"><br>
5.         名：<input type="text" v-model="lastName"><br>
6.         姓名：<span>{{fullName}}</span>
7.     </div>
8.     <script>
9.         const vm = new Vue({
10.             el: '.user',
11.             data: {
12.                 firstName: '李',
13.                 lastName: '四'
14.             },
15.             // 计算属性
16.             computed: {
17.                 fullName: {
18.                     // 当ful1Name被读取时，get就会被调用，且返回值就作为fullName的值，而且get有个缓存效果
19.                     // 这里的get在初次读取fullName时会被调用，在所依赖的数据进行改变时也会调用
20.                     // 这里所依赖的数据有俩分别是firstName和lastName
21.                     get() {
22.                         return this.firstName +"-" +this.lastName
23.                     },
24.                     // 当fullName被修改时调用
25.                     set(value){
26.                         console.log('set被hi行');
27.                         
28.                         const arr = value. split('-');
29.                         this.firstName = arr[0];
30.                         this.lastName = arr[1];
31.                     }
32.                 }
33.             }
34.         })
35.     </script>
36. </body>

复制代码

简写盘算属性（条件是只用到get的时间可以简写）

4.侦听属性

监督属性watch:
1.当被监督的属性变化时，回调函数主动调用，举行干系操作
2.监督的属性必须存在，I才能举行监督! !
3.监督的两种写法:
(1) . new Vue时传入watch配置
(2) .通过vm. $watch监督

1. <body>
2.     <div class="user">
3.         <h1>今天我很{{info}}</h1>
4.         <button @click='changeMood'>点击切换心情</button>
5.     </div>
6.     <script>
7.         new Vue({
8.             el: '.user',
9.             data: {
10.                 mood: true
11.             },
12.             computed: {
13.                 info() {
14.                     return this.mood ? '开心' : '不开心'
15.                 },
16.             },
17.             methods: {
18.                 changeMood() {
19.                     this.mood = !this.mood
20.                 }
21.             },
22.             watch: {
23.                 // 被监视的是谁
24.                 mood: {
25.                     immediate: true,// 初始化时 让handler调用一次
26.                     // handler有俩参数分别是修改前的值和修改后的值
27.                     handler(newValue, oldValue) {
28.                         console.log('mood被修改了', newValue, oldValue);
29.                     }
30.                 },
31.                 // 这个监视属性也可以监视计算属性
32.                 info: {
33.                     immediate: true,// 初识化时 让handler调用一次
34.                     // handler有俩参数分别是修改前的值和修改后的值
35.                     handler(newValue, oldValue) {
36.                         console.log('info被修改了', newValue, oldValue);
37.                     }
38.                 },
40.             }
41.         })
42.         // 也可以用vm.$watch进行监视 =》vm.$watch(监视对象，如何监视)
43.         vm.$watch('mood', {
44.             immediate: true,// 初识化时 让handler调用一次
45.             // handler有俩参数分别是修改前的值和修改后的值
46.             handler(newValue, oldValue) {
47.                 console.log('info被修改了', newValue, oldValue);
48.             }
49.         })
50.     </script>
51. </body>

复制代码

4.1深度监督

深度监督
①Vue中的watch默认不监测对象内部值的改变
②配置deep:true可以监测对象内部值改变
备注：
①Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
②使用watch时根据数据的详细结构，决定是否接纳深度监督

4.2监督属性简写

   简写（但是不能配置immediate:true,deep:true)

1. watch: {
2.                 // 完整写法
3.                 // mood: {
4.                 // deep:true
5.                 //     handler(newValue, oldValue) {
6.                 //         console.log("mood被修改", newValue, oldValue);
8.                 //     }
9.                 // }
10.                 // 简写
11.                 mood(newValue, oldValue) {
12.                     console.log('mood被修改', newValue, oldValue);
13.                 }
14.             }
15.         })
16.          // 正常写法
17.         vm.$watch('mood',{
18.                 immediate:true,
19.                 deep:true,
20.                 handler(newValue, oldValue) {
21.                     console.log('mood被修改', newValue, oldValue);
22.                 }
23.             })
24.             // 简写
25.             vm.$watch('mood',function(newValue, oldValue){
26.                 console.log('mood被修改', newValue, oldValue);
27.             })

复制代码

4.3computed & watch之间的区别

1.computed能完成的功能，watch 都可以完成。
2.watch能完成的功能，computed不肯定能完成，比方: watch可以举行异步操作。
3.两个紧张的小原则：
①所被Vue管理的函数，最好写成普通函数，如许this的指向才是vm或组件实例对象。
②全部不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成箭头函数，如许this的指向才是vm或组件实例对象。
5.写在最后

   各人好我是大熊