Vue中监测数据变化

Vue中使用keyup

<el-form-item label="姓名:" prop="name">
        <el-input
          type="text"
          v-model="userInfo.name"
          autocomplete="off"
          @keyup.native="changeUserInformation"
        ></el-input>
      </el-form-item>

注意：在element-ui中需要@keyup.native，在普通的input中只需要 @keyup=“changeUserInformation”
在script中

  methods: {
    changeUserInformation(){
    	console.log("数据发生了变化1")
        this.changeInformation = true;
    },

关于Vue中keyup的补充：

事件代码	事件描述
@keyup.enter	回车按键松开触发
@keyup.left	左键按键松开触发
@keyup.right	右键按键松开触发
@keyup.up	上键按键松开触发
@keyup.down	下键按键松开触发
@keyup.delete	删除键松开触发

其他监测数据变化方式：

1. vue中提供了watch方法，它用于观察vue实列上的数据变动，来响应数据的变化。注意这种方法对我没有用处！因为我的是userInfo.name，如果v-model="userInfo"可能就能使用了（不过我没试过！）；watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象

data(){
　　　　　　　　return {
　　　　　　　　　　example0:"",
　　　　　　　　　　example1:"",
　　　　　　}
　　　　},
watch:{
　example0(newVal,oldVal){//监控单个变量
           ……
   }，
example2(newVal,oldVal){//监控对象
           ……
   }，
}

2. computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

我之前使用过 AngularJS，所以对watch很熟悉。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

后记：每天将自己工作和学习中遇到的问题和好的方法记录下来。