Vue computed与watch用法区分

 更新时间:2023年02月01日 16:38:45   作者:博主花神  
watch和computed都是以Vue的依赖追踪机制为基础的,当某一个依赖型数据发生变化的时候,所有依赖这个数据的相关数据会自动发生变化,即自动调用相关的函数,来实现数据的变动,这篇文章简单介绍下Vue中computed和watch的区别异同,感兴趣的朋友一起看看吧

computed用法

  • 响应式缓存
  • 每一个计算属性都会被缓存起来,只要计算属性所依赖的属性发生变化,计算属性就会重新执行,视图也会更新
  • computed方法里面的属性不能在Date中定义
  • .具有缓存性,页面重新渲染值不变化,,计算属性会立即返回之前的计算结果,而不必再次执行函数
data: {
    firstName: 'one',
    lastName: 'two'
  },
//计算方法
computed: {
allname:{
	//回调函数 当需要读取当前属性值是执行,根据相关数据计算并返回当前属性的值
	get() {//
		return this.firstName + ' ' + this.lastName
	},
	//监视当前属性值的变化,当属性值发生变化时执行,更新相关的属性数据
	set(val){
		const names = val.split(' ');
		this.firstName = names[0];
        this.lastName = names[1];
	}
}
},

watch用法

  • 需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的
  • 应用:监听props,$emit或本组件的值执行异步操作
  • 无缓存性,页面重新渲染时值不变化也会执行

watch: {
    被监听的数据: {
        handler(新值, 旧值) {
            相关代码逻辑...
        }
    }
}

  • 被监听的数据:data中定义的数据
  • 新值:该数据改变后的新值;
  • 旧值:该数据改变之前的值。

常见应用

  • 监听本组件计算和监听
  • 计算或监听父传子的props值
  • 分为简单数据类型和复杂数据类型监听,监听方法如上watch的使用
  • 监听vuex的state或者getters值的变化
computed:{
    stateDemo(){
        return this.$store.state.demoState;
    }
}
watch:{
    stateDemo(){
        console.log('vuex变化啦')
    }
}

常见错误

当修改父组件传过来的值,会报错

props:['listShop'],
    data(){
      return{}
    },
    created(){
      this.listShop=30
}

报错,错误是说的避免直接修改父组件传入的值,因为会改变父组件的值

解决方法1,如果传的是简单类型,就在data中重新定义一个变量,改变指向,复杂类型不行,复杂类型存的是指针

//不会有任何报错,也不会影响父组件!
	props:['listShop'],
    data(){
      return{
        listShopChild:this.listShop //改变指向
      }
    },
    created(){
      this.listShopChild=30
    }

但如果是复杂类型,因为存的是指针,赋值给新变量也会改变原始变量值

方法:

1.手动深度克隆

2.Object.assign,只会对只是一级属性复制,比浅拷贝多深拷贝了一层而已,所以还是无法达到深度克隆的目的.

3.强大的JSON.stringify和JSON.parse

4.直接用computed改变

//数组深度克隆:
var x = [1,2,3];
var y = [];
for (var i = 0; i < x.length; i++) {
    y[i]=x[i];
}
console.log(y);  //[1,2,3]
y.push(4);
console.log(y);  //[1,2,3,4]
console.log(x);  //[1,2,3]
//对象深度克隆:
var x = {a:1,b:2};
var y = {};
for(var i in x){
    y[i] = x[i];
}
console.log(y);  //Object {a: 1, b: 2}
y.c = 3;
console.log(y);  //Object {a: 1, b: 2, c: 3}
console.log(x);  //Object {a: 1, b: 2}
//函数深度克隆
//为什么函数可以直接赋值克隆?
//由于函数对象克隆之后的对象会单独复制一次并存储实际数据,因此并不会影响克隆之前的对象。所以采用简单的复制“=”即可完成克隆。
var x = function(){console.log(1);};
var y = x;
y = function(){console.log(2);};
x();  //1
y();  //2
//方法三
const obj1 = JSON.parse(JSON.stringify(obj));
//方法四
computed:{
  listShopChild(){
    return this.listShop
   }
}

到此这篇关于Vue computed与watch用法区分的文章就介绍到这了,更多相关Vue computed与watch内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

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

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

    这篇文章主要为大家详细介绍了vue如何实现observer和watcher源码的相关资料,分析vue的observe实现源码,聊聊如何一步一步实现$watch,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 在vue中动态修改css其中一个属性值操作

    在vue中动态修改css其中一个属性值操作

    这篇文章主要介绍了在vue中动态修改css其中一个属性值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-12-12
  • 解决vue-cli + webpack 新建项目出错的问题

    解决vue-cli + webpack 新建项目出错的问题

    下面小编就为大家分享一篇解决vue-cli + webpack 新建项目出错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue-i18n的9以上版本中@被用作特殊字符处理,直接用会报错问题

    vue-i18n的9以上版本中@被用作特殊字符处理,直接用会报错问题

    这篇文章主要介绍了vue-i18n的9以上版本中@被用作特殊字符处理,直接用会报错问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue3中使用Monaco-editor的教程详解

    Vue3中使用Monaco-editor的教程详解

    Monaco-editor,一个vs code 编辑器,需要将其继承到项目,这篇文章主要为大家详细介绍了如何在vue中安装和使用Monaco-editor,有需要的小伙伴可以参考下
    2023-11-11
  • Vue3项目搭建的详细过程记录

    Vue3项目搭建的详细过程记录

    使用VUE3开发很久了,但一直没进行总结和记录,忙里偷闲整理搭建一套VUE3项目脚手架,下面这篇文章主要给大家介绍了关于Vue3项目搭建的详细过程,需要的朋友可以参考下
    2022-10-10
  • Vue-Router基础学习笔记(小结)

    Vue-Router基础学习笔记(小结)

    这篇文章主要介绍了Vue-Router基础学习笔记(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • Vue中使用create-keyframe-animation与动画钩子完成复杂动画

    Vue中使用create-keyframe-animation与动画钩子完成复杂动画

    这篇文章主要介绍了Vue中使用create-keyframe-animation与动画钩子完成复杂动画,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • Vue quill-editor 编辑器使用及自定义toobar示例详解

    Vue quill-editor 编辑器使用及自定义toobar示例详解

    这篇文章主要介绍了Vue quill-editor编辑器使用及自定义toobar示例详解,这里讲解编辑器quil-editor的知识结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • vue实现token登录验证的完整实例

    vue实现token登录验证的完整实例

    最近公司新启动了个项目,用的是vue框架在做,下面这篇文章主要给大家介绍了关于vue实现token登录验证的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04

最新评论