vue中computer和watch的区别和使用

众所周知computer和watch都是用作监听某些变量使用的
也就是说当某一个数据发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。
他们两个的左右除了监听数据以外还可以让代码变得简洁,没有过多地赘余混乱
有什么区别呢:
1.computed是计算属性，实际上和data对象里的数据属性是差不多的（使用上）。
2.watch:类似于监听机制+事件机制。(监听某个变量,里面可以运行事件)

watch和computed各自处理的数据关系场景不同

1.watch擅长处理的场景：一个数据影响多个数据
2.computed擅长处理的场景：一个数据受多个数据影响

computer

一个数据被多个数据影响

 computed: {count() {return (this.list[0].num + this.list[1].num) * this.c;},},

这里就相当于定义了一个名为count的变量
这个变量受 this.list[0].num this.list[1].num this.c 这三个变量的影响
只要这三个变量其中一个变化 count这个变量也会变化

在页面中展示(和data里面定义的一样):

  <p>count:{{ count }}</p>

获取使用(和data里面定义的一样):

  console.log(this.count);

使用场景:

购物车(常用)
等待大佬们的补充

watch

一个数据将多个数据影响

data() {return {a: 1,shipStatusArr: {name: 'zhangsanlisi',age: 12}}
},
watch: {a: function (newValue, oldVal) {//更新后的值  更新前的值console.log( newValue, oldVal )},//数组对象型 深度监听shipStatusArr: {handler(newValue, oldValue) {console.log(newValue, oldValue)},deep: true  // 深度监听immediate: true//进入组件的时候，第一次并不会执行watch，只有值发生改变才会执行 , 是因为immediate 默认 false//当 immediate = true 的时候，进入组件会立即执行。并且可以监测到组件传递数据。回调将会在侦听开始之后被立即调用。}
}

使用场景:

搜索
清空相关联的数据(当某个字段和某些字段有关联时,当第一个字段变化时让其他字段清空)
等待大佬们的补充

点个关注支持一下我吧

vue中computer和watch的区别和使用相关推荐

vue方法调用失败后多次调用_浅析Vue中 computed / watch / methods的区别
思考:请说下Vue中computed 和 watch 的区别( 面试题 ) 构造选项 computed / watch / methods computed ● computed 起初构想在Vue的 ...
vue中params和query的区别，以及具体用法
query传递参数会在url后面用?连接起来,且参数之间用&&符号连接然后显示在页面的url中:params传递参数不会显示在页面中:query有点像ajax中的get请求,而para ...
Vue 中 computed vs methods的区别
computed:计算属性 methods:方法 watch:侦听器 computed与methodes区别 1.computed是响应式的,methods并非响应式. 2.调用方式不一样,compu ...
vue中runtimecompiler和runtimeonly的区别
简单总结如果在之后的开发中,你依然使用template,就需要选择runtimecompiler 如果你之后的开发中,使用的是.vue文件夹开发,那么可以选择runtimeonly runtimec ...
vue中的target与currentTarget区别
<template><transition name="slide"><div class="top_box" @click=&q ...
vue中computed和watched的区别
computed computed在vue中起到计算属性作用. <p>firstName: <input type="text" v-model="fi ...
Vue中data和computed的区别
First data 和 computed都是响应式的,先看看官方的说法: Data: Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data ...
Vue中computed和watch的区别（面试题）
computed:通过属性计算而得来的属性 1.computed内部的函数在调用时不加(). 2.computed是依赖vm中data的属性变化而变化的,也就是说,当data中的属性发生改变的时候,当 ...
关于Vue中的v-if和v-for区别讲解
首先在官方文档中明确指出v-for和v-if不建议一起使用. 一.v-if和v-for的作用 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 true值的时候被渲染. v-fo ...
Vue中computed和methods的区别
为了说明method与computed的区别,在此我想先来看看computed属性在vue官网中的说法: 模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重 ...

vue中computer和watch的区别和使用

vue中computer和watch的区别和使用

watch和computed各自处理的数据关系场景不同

computer

watch

vue中computer和watch的区别和使用相关推荐

最新文章

热门文章