vue学习笔记-Vue核心（二）6.数据代理,什么是数据代理？Vue中的数据代理 7.事件处理、事件修饰符、按键修饰符

6.数据代理

6.1什么是数据代理？

通过一个对象代理对另一个对象中的属性的操作（读/写）

示例代码

<script type = "text/javascript">
      let obj = {x:100}
      let obj2 ={y:200}
      Object.defineProperty(obj2,'x',){
          get(){//当读取obj2的x属性时，get函数(getter)就会被调用，其返回值就是x的值
          return obj.x
          },
          set(value){//当obj2的x属性被修改时，set函数(setter)就会被调用，且会收到修改的具体值
          obj.x=value
          }   
      }
</script>

6.2Vue中的数据代理

1.vue中的数据代理：通过vm对象来代理_data对象中属性的操作(读/写)

2.好处：更加方便的操作data中的数据

3.原理:

通过Object.defineProperty()把_data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/srtter内部去操作(读/写)data中对应的属性

示例代码

<div id="root">
    //不使用数据代理 渲染的数据需要_data.name才能找到 很麻烦
    <h2>学校名称：{{_data.name}}</h2>
    <h2>学校地址：{{_data.address}}</h2>
    //使用数据代理 可直接用name 渲染数据 
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
        el:'#root',
        data:{
            name:'尚硅谷',
            address:'宏福科技园'
            }
        })
</script>

7.事件处理

7.1事件处理是什么

从字面上理解，它就是DOM事件，只不过在vue中使用方式不同。
深层次理解，它是控制数据变化的控制器，是连接视图与数据的桥梁。

7.2事件的基本使用

示例代码

   <div id="root">
            <h2>欢迎来到{{name}}学习</h2>
            <!-- <button v-on:click="showInfo">点我提示信息</button> -->
            //函数如果没有参数调用时可以省略"()"
            <button @click="showInfo1">点我提示信息1（不传参）</button>
            //参数可以自定义 如果需要用到event事件对象需要用$event来占位
            <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
        </div>
    </body>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        const vm = new Vue({
            el:'#root',
            data:{
                name:'皓月',
            },
            methods:{
                showInfo1(event){
                    // console.log(event.target.innerText)
                    // console.log(this) //此处的this是vm，如果改用箭头函数则此时this指向window
                    alert('同学你好！')
                },
                showInfo2(event,number){
                    console.log(event,number)
                    // console.log(event.target.innerText)
                    // console.log(this) //此处的this是vm
                    alert('同学你好！！')
                }
            }
        })
    </script>

总结

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm实例上；
methods中配置的函数，不要用箭头函数！否则this就不是vm了；
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

7.3事件修饰符

Vue中的事件修饰符

prevent：阻止默认事件(常用)
stop：阻止事件冒泡(常用)
once：事件只触发一次(常用)
capture：使用事件的捕获模式(事件侦听，事件发生的时候会调用)
self：只有event.target是当前操作的元素时才触发事件(当事件发生在该元素本身而不是子元素的时候会触发)
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

<div id="root">
            <h2>欢迎来到{{name}}学习</h2>
            <!-- 阻止默认事件（常用） -->
            <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

            <!-- 阻止事件冒泡（常用） -->
            <div class="demo1" @click="showInfo">
                <button @click.stop="showInfo">点我提示信息</button>
                <!-- 修饰符可以连续写 -->
                <!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
            </div>

            <!-- 事件只触发一次（常用） -->
            <button @click.once="showInfo">点我提示信息</button>

            <!-- 使用事件的捕获模式 -->
            <div class="box1" @click.capture="showMsg(1)">
                div1
                <div class="box2" @click="showMsg(2)">
                    div2
                </div>
            </div>

            <!-- 只有event.target是当前操作的元素时才触发事件； -->
            <div class="demo1" @click.self="showInfo">
                <button @click="showInfo">点我提示信息</button>
            </div>

            <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
            <ul @wheel.passive="demo" class="list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
</div>

7.4按键修饰符

格式：v-on:keyup.按键名 或 @keyup.按键名

实例：

<div id="root">
    //当按下Enter【回车】键时调用函数showInfo
    <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">
</div>
<script>
    new Vue({
        el:'#root',
        data:{
            name:'皓月'
        },
        methods: {
            showInfo(e){
            // 拿到当前输入框的值
            console.log(e.target.value)
            }
        },
    })
</script>

1.Vue中常用的按键别名：

回车 => enter

删除 => delete (捕获“删除”和“退格”键)

退出 => esc

空格 => space

换行 => tab (特殊，如果用keyup在触发事件前焦点已经被切换，所以必须配合keydown去使用)

上 => up

下 => down

左 => left

右 => right

2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

示例：错误写法：@keyup.CapsLock 正确写法：@keyup.caps-lock

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta(win)

(1)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2)配合keydown使用：正常触发事件。

4.也可以使用keyCode去指定具体的按键（已从web标准中移除，不推荐）

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

示例： Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo"> //使用自定义的按键别名

小技巧：

//使系统修饰键+指定按键触发，如只有按下cyrl+y时才触发事件
 <input type="text" placeholder="按下回车提示输入" @keydown.ctrl.y="showInfo">
// 修饰符可以连续写，如阻止冒泡和默认行为
<a href="http://www.atguigu.com" @click.stop.prevent="showInfo">点我提示信息</a>

8.计算属性(computed)

8.1认识计算属性

模板中放入太多的逻辑会让模板过重且难以维护，使用计算属性可以让模板更加的简洁
在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以

原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

computed: {
    fullName: {
        //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
        //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
         get: function(){
            return this.firstName + '-' + this.lastName
         },
         set: function(newValue){
            // 传进来的值用逗号分隔为数组
            const arr = value.split(',')
            this.firstName = arr[0]
            this.lastName = arr[1]
         }
    }
 }

好处

① 使得数据处理结构清晰；

② 依赖于数据，数据更新，处理结果自动更新；

③ 计算属性内部this指向vm实例；

④ 在template调用时，直接写计算属性名即可；

⑤ 常用的是getter方法，获取数据，也可以使用set方法改变数据；

⑥ 相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

8.2计算属性的简写方法

如果计算属性后面直接跟一个 function，使用的就是计算属性的默认方法 getter 来读取

ps：此写法只适用于只考虑读写不考虑修改时使用

computed{
    //这里的fullName()是fullName:function()的简写
    fullName(){
        console.log('get被调用了')
        return this.firstName + '-' + this.lastName
    }
}

计算属性表面上看是个函数实际上是把函数执行后的返回值作为vm.计算属性名的值所以要在模板上直接写计算属性名才能调用

9.监视属性(watch)

9.1认识监视属性

当被监视的属性变化时, 回调函数handler自动调用, 进行相关操作
要监视的属性必须是已存在的属性(如果不存在值为undefined，不会报错)
监视的两种写法：

① new Vue时传入watch配置

watch:{
    isHot:{
        immediate:true, //初始化时让handler调用一下
        //handler什么时候调用？当isHot发生改变时。
        handler(newValue,oldValue){
        //handler中传入两个参数：改变前的值和改变后的值
        console.log('isHot被修改了',newValue,oldValue)
        }
    }
}

② 通过vm.$watch监视

vm.$watch('isHot',{
        immediate:true, //初始化时让handler调用一下
        //handler什么时候调用？当isHot发生改变时。
        handler(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldValue)
        }
})

9.2深度监视

Vue中的watch默认不监测对象内部值的改变（一层）

//监视多级结构中某个属性的变化
'numbers.a':{
    handler(){
        console.log('a被改变了')
    }
}

配置deep:true可以监测对象内部值改变（多层）

//监视多级结构中所有属性的变化
numbers:{
    deep:true,
    handler(){
    console.log('numbers改变了')
    }
}

效果：

可以提高效率

Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

使用watch时根据数据的具体结构，决定是否采用深度监视

补充： Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听。

9.3watch的简写形式

前提：当配置对象只有handler时才能进行简写

方法一

isHot(newValue,oldValue){
    console.log('isHot被修改了',newValue,oldValue)
}

方法二

vm.$watch('isHot',function(newValue,oldValue){
    console.log('isHot被修改了',newValue,oldValue)
})

注意：所有vue所管理的函数不要写成箭头函数，会改变this指向

9.4watch和computed对比

Computed本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。
Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听。

区别：

1.computed能完成的功能，watch都可以完成。

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象。