Vue computed与watch用法区分

2024-10-01 21:41:14

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 中的 computed 和 watch 的区别

目录一.computed介绍 1.1.get 和 set 用法 1.2.计算属性缓存二.watch介绍三.两者区别 3.1.对于 computed 3.2.对于 watch 四.应用场景一.computed介绍 computed 用来监控自己定义的变量,该变量在 data 内没有声明,直接在 computed 里面定义,页面上可直接使用. //基础使用 {{msg}} <input v-model="name" /> //计算属性 computed:{ msg:fu
关于Vue的 watch、computed和methods的区别汇总

目录 1 前言 2 基础用法 2.1 methods 方法 2.2 computed 计算属性 2.3 watch 侦听器 3 三者的区别 3.1 方法 VS 计算属性 3.2 计算属性 VS 侦听器 1 前言创建一个Vue实例时,可以传入一个选项对象 const vm = new Vue({ data: { msg: 'hello' }, computed: {}, methods: {}, watch: {} }) 这个选项对象可以指定非常多的选项(或者说属性),和数据相关的选项有:包括但
Vue 中的 computed 和 watch 的区别详解

目录 computed 注意应用场景 watch 总结 computed computed 看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed 的值在 getter 执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取 computed 的值时才会重新调用对应的 getter 来计算. 1)下面是一个比较经典简单的案例 <template> <div class="hello"> {{ful
Vue 基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解

目录 1.Vue 实例选项 2.计算属性(computed) 2.1.computed 的基本用法 2.2.computed 作为函数传参 2.3.计算属性和函数的区别 3.侦听器(watch) 3.1.watch 的基本用法 3.2.侦听器的配置项 4.过滤器(filter) 4.1.过滤器有什么用 4.2.全局过滤器 4.3.局部过滤器 4.4.过滤器串联 4.5.过滤器传参 1.Vue 实例选项在实例化Vue对象时,需要为Vue的构造函数提供一系列的配置信息,代码如下: new Vue(
详解Vue中Computed与watch的用法与区别

目录 computed computed只接收一个getter函数 computed同时接收getter函数对象和setter函数对象调试 Computed watchEffect 立即执行监听基本数据类型停止watchEffect 清理watchEffect watchPostEffect 和 watchSyncEffect watchEffect不能监听对象 watch 监听单个数据监听多个数据(传入数组) 官方文档总结 computed watchEffect watch comp
一文搞懂Vue中computed和watch的区别

目录一.computed介绍 1.1.get 和 set 用法 1.2.计算属性缓存二.watch介绍三.两者区别 3.1.对于 computed 3.2.对于 watch 四.应用场景一.computed介绍 computed 用来监控自己定义的变量,该变量在 data 内没有声明,直接在 computed 里面定义,页面上可直接使用. //基础使用 {{msg}} <input v-model="name" /> //计算属性 computed:{ msg:fu
Vue3中的 computed,watch,watchEffect的使用方法

目录一.computed 二.watch vu2 的写法 Vue3 中这样写三.watchEffect 一.computed <template> 姓:<input v-model="person.firstName"><br/><br/> 名:<input v-model="person.lastName"><br/><br/> <span>全名:{{person.
Vue computed与watch用法区分

目录 computed用法 watch用法 computed用法响应式缓存每一个计算属性都会被缓存起来,只要计算属性所依赖的属性发生变化,计算属性就会重新执行,视图也会更新 computed方法里面的属性不能在Date中定义 .具有缓存性,页面重新渲染值不变化,,计算属性会立即返回之前的计算结果,而不必再次执行函数 data: { firstName: 'one', lastName: 'two' }, //计算方法 computed: { allname:{ //回调函数当需要读取当前属
vue学习之Vue-Router用法实例分析

本文实例讲述了vue学习之Vue-Router用法.分享给大家供大家参考,具体如下: Vue-router就像一个路由器,将组件(components)映射到路由(routes)后,通过点击<router-link>它可以在<router-view>中将相应的组件渲染出来. 1.使用vue-router的步骤 //1.创建路由组件 const Link1={template:'#link1'}; const Link2={template:'#link2'}; const Link
vue中appear的用法

关于appear的用法和enter的用法相似,它只是在第一次渲染的时候才会起作用.看完整的代码: 别忘了引用vue.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初始渲染的过渡</title> <script src="vue.js"></script>
关于vue中 $emit的用法详解

1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div&
Vue 中mixin 的用法详解

说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父
vue中keep-alive的用法及问题描述

1.keep-alive的作用以及好处在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能. 2.keep-alive的基本用法在app.vue中  <keep-alive> <router-view v-if="$route.meta.keep_alive"&g
Vue中$refs的用法详解

说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素中,添加ref属性,然后在JS中通过vm.$refs.属性来获取注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D
Vue Extends 扩展选项用法完整实例

本文实例讲述了Vue Extends 扩展选项用法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Extends 扩展选项</title> <script type="text/javascript" src="https:/
vue中$refs的用法及作用详解

一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值. 但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行. 然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了用法如下: HTML: <div id="app"> <input
vue.js中toast用法及使用toast弹框的实例代码

1.首先引入 import { Toast } from 'vant' 写个小列子绑定一个click事件 2.写事件在methods写方法 showToast() { this.$toast({ message: "今日签到+3", }) }, 3.效果图如下一个简单的toast提示成就好了下面通过实例代码看下vue 中使用 Toast弹框 import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(To

Vue computed与watch用法区分

目录

computed用法

watch用法

相关推荐

随机推荐