目录

一、 vue如何监听键盘事件

二、Vue 中 computed 和 watch 有什么区别？计算属性 computed：

侦听属性 watch：

三、watch怎么深度监听对象变化

四、 怎么在watch监听开始之后立即被调用

五、为什么data属性必须声明为返回一个初始数据对应的函数呢

---

一、 vue如何监听键盘事件

v-on:keyup后面接修饰符，代表你想监听的按键

<template>
  <input ref="myInput" type="text" value="hello world" autofocus @keyup.enter="handleKey">
</template>

<script>
  export default {
    methods: {
      handleKey(e) {
        console.log(e)
      }
    }
  }
</script>

---

二、Vue 中 computed 和 watch 有什么区别？
计算属性 computed：

支持缓存，只有依赖数据发生变化时，才会重新进行计算函数；
计算属性内不支持异步操作；
计算属性的函数中都有一个 get(默认具有，获取计算属性)和 set(手动添加，设置计算属性)方法；
计算属性是自动监听依赖值的变化，从而动态返回内容。

侦听属性 watch：

不支持缓存，只要数据发生变化，就会执行侦听函数；
侦听属性内支持异步操作；
侦听属性的值可以是一个对象，接收 handler 回调，deep，immediate 三个属性；
监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些其他事情。

---

三、watch怎么深度监听对象变化

选项：deep
为了发现对象内部值的变化，可以在选项参数中指定 deep: true。注意监听数组的变更不需要这么做。

  let vm=new Vue({
        el:"#first",
        data:{msg:{name:'北京'}},
        watch:{

            msg:{
                handler (newMsg,oldMsg){
                    console.log(newMsg);
                },
                immediate:true,
                deep:true
            }
        }
    })

---

四、 怎么在watch监听开始之后立即被调用

选项：immediate

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调

  let vm=new Vue({
        el:"#first",
        data:{msg:'liuneng'},
        watch:{

            msg:{
                handler (newMsg,oldMsg){
                    console.log(newMsg);
                },
                immediate:true
            }
        }
    })

---

五、为什么data属性必须声明为返回一个初始数据对应的函数呢

如果 data 是一个对象，当复用组件时，因为 data 都会指向同一个引用类型地址，其中一个组件的 data 一旦发生修改，则其他重用的组件中的 data 也会被一并修改。
如果 data 是一个返回对象的函数，因为每次重用组件时返回的都是一个新对象，引用地址不同，便不会出现如上问题