详解Vue中watch对象内属性的方法

vue提供了watch方法，用于监听实例内data数据的变化。通常写法是：

new Vue({
 data: {
  count: 10，
  blog:{
    title:'my-blog',
    categories:[]
  }
 },
 watch: {
  count: function (newval, oldVal) {
   console.log(`new: %s, old: %s`, newVal, oldVal);
  }
 }
})

上述情况里data中的count属性可以直接监听，但是如果需要监听的数据是对象内的某一属性值的变化，直接watch对象blog是检测不到变化的，这是因为blog这个对象的指向并没有发生改变。有几个解决方法

1.深度监测

new Vue({
 data: {
  count: 10，
  blog:{
    title:'my-blog',
    categories:[]
  }
 },
 watch: {
  blog:{
    handler(newVal,oldVal){
      console.log(`new: ${newVal}, old: ${oldVal}`);
    },
    deep:true
  }
 }
})

里面的deep设为了true，这样的话，如果修改了这个blog中的任何一个属性，都会执行handler这个方法。不过这样会造成更多的性能开销，尤其是对象里面属性过多，结构嵌套过深的时候。而且有时候我们就只想关心这个对象中的某个特定属性，这个时候可以这样

2.用字符串来表示对象的属性调用

new Vue({
 data: {
  count: 10，
  blog:{
    title:'my-blog',
    categories:[]
  }
 },
 watch: {
  'blog.categories'(newVal, oldVal) {
    console.log(`new:${newVal}, old:${oldVal}`);
  },
 }
})

3.使用computed计算属性

new Vue({
 data: {
  count: 10，
  blog:{
    title:'my-blog',
    categories:[]
  }
 },
 computed: {
  categories() {
   return this.blog.categories;
  }
 },
 watch: {
  categories(newVal, oldVal) {
   console.log(`new:${newVal}, old:${oldVal}`);
  },
 },
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js 中的 $watch使用方法

    Vue.js 中的 $watch使用方法

    这两天学习了Vue.js 中的 $watch这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. github 源码 Observer, Watcher, vm 可谓 Vue 中比较重要的部分,检测数据变动后视图更新的重要环节.下面我们来看看 如何实现一个简单的 $watch 功能,当然Vue 中使用了很多优化手段,在本文中暂不一一讨论. 例子: // 创建 vm let vm = new Vue({ data: 'a' }) // 键路径 vm.$watch('a.b.c', func

  • vue watch自动检测数据变化实时渲染的方法

    vue watch自动检测数据变化实时渲染的方法

    本文介绍了vue watch自动检测数据变化实时渲染的方法,分享给大家,具体如下: 首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 第一个hand

  • vue使用watch 观察路由变化，重新获取内容

    vue使用watch 观察路由变化，重新获取内容

    问题背景: 点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新.如图: 页面代码如下: <script> export default { data() { return { data: {} } }, methods: { fetchDate() { // 使用 axios获取数据 ...... }, created() { this.fetchDate(); } } </sc

  • 详解vue2 $watch要注意的问题

    使用$watch监听的时候,监听的数据是一个对象的时候,要注意几点: 监听组件内某个对象里面的某项属性时,不要监听对象,直接监听对象里面的属性(深度监听),只有直接监听这个对象里面的属性,只更新对象里面的属性时也能直接监听到此数组的变化. 如 data(){ return { msgs : { list:[1,2,3] } } }, watch:{ msg(newVal,oldVal){ console.log(newVal);//(1) }, "msg.list":function(

  • Vue数据监听方法watch的使用

    Vue数据监听方法watch的使用

    watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来 当Vue视图中的数据变化时, 关联的函数会被执行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>监听方法watch的使用</title> <script src="https://cdn.bootcss.com/

  • 详解Vue中watch的高级用法

    假设有如下代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' },

  • vue.js中$watch的用法示例

    前言 vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch() ; <template> //观察数据为字符串或数组 <input v-model="example0"/> <input v-m

  • 详解vue中computed 和 watch的异同

    一.computed 和 watch 都可以观察页面的数据变化.当处理页面的数据变化时,我们有时候很容易滥用watch. 而通常更好的办法是使用computed属性,而不是命令是的watch回调. 这里我直接引用vue官网的例子来说明: html: 我们要实现 第三个表单的值 是第一个和第二个的拼接,并且在前俩表单数值变化时,第三个表单数值也在变化 <div id="myDiv"> <input type="text" v-model="

  • vue.js使用watch监听路由变化的方法

    vue.js使用watch监听路由变化的方法

    watch除了可以监听数据的变化,路由的变化也能被其监听到 效果如下: 具体代码 当路由发生变化后,在watch中写具体的业务逻辑 let vm = new Vue({ el: "#app", data: {}, router, watch: { '$route.path': function (newVal, oldVal) { if (newVal === '/login') { console.log('欢迎进入登录页面'); } if (newVal === '/registe

  • vue如何实现observer和watcher源码解析

    本文能帮你做什么?好奇vue双向绑定的同学,可以部分缓解好奇心,还可以帮你了解如何实现$watch. 前情回顾 我之前写了一篇没什么干货的文章,并且刨了一个大坑. 今天,打算来填一天,并再刨一个. 不过话说说回来了,看本文之前,如果不知道Object.defineProperty,还必须看看解析神奇的Object.defineProperty 不得不感慨vue的作者,人长得帅,码写的也好,本文是根据作者源码,摘取出来的 本文将实现什么 正如上一篇许下的承诺一样,本文要实现一个$wacth con

  • vue watch监听对象及对应值的变化详解

    如下所示: var vm=new Vue({ data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听,可监听到对象.数组的变化 handler(val, oldVal){ console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的 }, deep:true }

随机推荐