Vue.js 计算属性与侦听器

最新推荐文章于 2023-07-12 23:51:02 发布

xingxingxingge

最新推荐文章于 2023-07-12 23:51:02 发布

阅读量334

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/xingxingxingge/article/details/80348450

版权

Vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

computed: 是指一个属性他是根据其他数据计算出来的新的结果

watch: 监听某个数据或者计算属性发生变化时,执行的方法

举个简单的例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>Vuetest</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="root">
    数字1:<input type="text" v-model="number1"><br/>
    数字2:<input type="text" v-model="number2">
    <div>两数和为:{{sum}}</div>
    <div>watch:{{count}}</div>
  </div>
<script>
  new Vue({
    el:"#root",
    data:{
      number1:'',
      number2:'',
      count:0
    },
    computed: {
      sum: function(){
         return Number(this.number1) + Number(this.number2);
      }
    },
    watch: {
      sum: function(newval, oldval){    //计算属性 sum 发生改变时执行此方法
        this.count++;
      }
    }
  });
</script>
</body>
</html>

computed 和 watch 高级的用法

computed 计算属性默认只有 getter , 不过在需要时你也可以提供一个 setter

官方示例运行 vm.fullName = "John Doe" 时, setter 会被调用

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

watch 深度监听

data:{
  person: {
    name: "jon",
    age: 18
  }
},
watch: {
  person: {
    //handler 将在 person 发生变化时执行
    handler: function (newval, oldval) {
      console.log(newval, oldval)
    },
    deep: false,
    immediate: true
  }
}

deep 默认为 false , 表示不需要深度监听, 当我们修改 person.name = "jack" 或者 person.age= 20 可以发现 watch 是无效的, 默认的情况下只有给重新赋值 person={name: "jack", age=20} 才会触发 watch, 如果要监听内部的属性变化就需要设置 deep: true

如果你只需要监听某一个属性变化比如说 name 也可以写成

watch: {
  "person.name": {
    handler: function (newval, oldval) {
      console.log(newval, oldval)
    }
  }
}

immediate: true; 表示第一次声明 person 就会触发 watch

xingxingxingge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 计算属性与侦听器

computed: 是指一个属性他是根据其他数据计算出来的新的结果watch: 监听某个数据或者计算属性发生变化时,执行的方法举个简单的例子<!DOCTYPE html><html lang="en"><head><meta charset = "UTF-8"><title>Vuetest</title>...
复制链接

扫一扫