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内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!