Vue中监视属性和计算属性区别解析

目录
  • 计算属性
  • 需求
  • 使用watch实现
    • 准备工作
    • 测试
  • 测试
  • 在computed当中书写
  • 总结

计算属性

顾名思义,计算属性就是计算出来的属性,英文名儿computed
这里要和data和methods里的东西区分,data里的属性,methods里的函数,你写的都会原封不动放到vm里,但是computed里面的东西写的是对象,最后放到vm里的是这个对象的名,值是get里的返回值。

下面看下Vue中监视属性和计算属性区别。

需求

我们将计算属性的案例使用watch写一遍

需求一揽

  • 两个输入框
  • 下方一个全名
  • 要求输入框内容发生变化的时候,全名也跟着变化

使用watch实现

自实现

  • 既然要使用深度监视,那么我们就需要在data当中准备一个对象属性
data:{
 // 全名
 fullname:{
    full:""
    name:""
},
userName:""
},

  • 我们的深度监视针对的就是这个fullName
  • 我们在data当中定义另一个变量userName,这个变量可以理解为计算属性,但是这里我们不使用computed配置项

准备工作

html

<!-- 创建一个容器 -->
    <form class="app">
        <input type="button" value="重置" @click="reset">
        <!-- 差值语法 == v-model -->
        <div class="box" >
            <div class="title">深度监视</div>
            请输入:<input type="text" v-model="fullName.full"><br>
            请输入:<input type="text" v-model="fullName.name">
            <!-- 使用深度监视 -->
            <div class="content">{{userName}}</div>
        </div>
    </form>

js

<script>
    var vm = new Vue({
      el: '.app',
      data: {
        // 全名
        fullName:{
            full:"",
            name:""
        },
        userName:""
      },
      methods:{
        // 清除fullName的值
        reset(){
            this.fullName.full = ""
            this.fullName.name = ""
        }
      },
      // 对fullName进行监视
      watch:{
        fullName:{
            deep:true,
            handler(){
                this.userName = this.fullName.full + "-" + this.fullName.name
            }
        }
      }

    });
</script>
  • 我们开启了深度监视,当fullName内部值发生改变
  • 那么handler就会被调用
  • 因为v-model与input当中的value进行了双向绑定
    • 所以当期发生变化的时候,data当中的full与name也会跟着变化
  • 我们在fullName的深度监视中能够同步获得data当中已经发生改变的full与name
  • 在handler当中将userName的值,对其进行加法运算
this.userName = this.fullName.full + "-" + this.fullName.name

  • 我感觉这样有点麻烦,看老师怎么做的吧

测试

新需求

  • 当 姓(full) 发生变化的时候,这个全名(userName),延迟一秒更新
  • 不过这样的话,那么就需要对full与name单独监视了
// 对fullName进行监视
      watch:{
        'fullName.full':{
            handler(newValue){
                // 新增一个定时器
                setTimeout(()=>{
                    this.userName = newValue + "-" + this.fullName.name
                },1000)
            }
        },
        'fullName.name':{
            handler(newValue){
                this.userName = this.fullName.full + "-" + newValue;
            }
        }
      }

注意点

  • setTimeout这个函数,是js模块当中定时器模块所管理的一个函数
  • 它的this是window
  • 我们这个需求当中,setTimeout是vue当中,一个监听属性的handler回调当中的内容
  • 那么这个时候如果不写成箭头函数,那么this的指向就是window
  • 但是写了箭头函数,那么setTimeout的this指向就没有了
  • 没有怎么办?往上一级找嘛,上一级是谁?handler嘛,handler的this是谁?vue嘛

测试

在computed当中书写

是不能够通过异步请求来去维护数据的

  • 这俩配置项各有千秋,但是我个人觉得watch来书写这个需求的时候,会比较麻烦
  • 关于计算属性
    • 在我确认自己不需要对fullName这个整体进行修改的时候,那么我只需要一行代码即可完成这个需求
//配置计算属性
computed:{
    //完整写法
    /* fullname:{...
    // 简写形式
    /*fullName:funaction(){...
    fullName(){
      return this.full + "-" + this.name
  }
}

  • 关于监视属性

    • 我得亲自去监视姓和名的变化,或者说进行深度监视
    • 然后在handler当中去修改
// 对fullName进行监视
watch:{
 fullName:{
     deep:true,
     handler(){
          this.userName = this.fullName.full + "-" +this.fullName.name
	  }
	 }
}

总结

computed与watch配置项

  • computed能完成的功能,watch都可以完成
  • watch能完成的功能,computed不一定能完成(参考异步)
  • 典中典
    • vue所管理的函数,最好写成普通函数,因为this的指向是vue或组件实例对象,别人帮我们指定好了
    • 所有不被vue所管理的函数(定时器回调,ajax回调),最好写成箭头函数
      • 这样this的指向才能是 vm 或者 组件实例对象,这样才能向上查找,向上兼容

到此这篇关于Vue中监视属性和计算属性区别的文章就介绍到这了,更多相关vue监视属性和计算属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue.js中的计算属性、监视属性与生命周期详解

    前言 本章节咱们来说一下Vue中两个非常重要的计算属性.监视属性和生命周期,不废话直接上干货 计算属性 计算属性介绍 在模板中可以直接通过插值语法显示一些data中的数据,有些情况下我们需要对数据进行转化或者计算后显示,我们可以使用computed选项来计算,这时有些小伙伴可能就会问,我直接定义函数再调用不就行了,为什么还要整一个计算属性呢?这个问题在下边再做解释,我们先来看一下计算属性怎么用! 入门案例 需求 将人的姓和名拼接在一起 代码 <!DOCTYPE html> <html&g

  • Vue计算属性与监视属性实现方法详解

    目录 一.计算属性 1.插值语法实现 2.通过方法实现 3.通过计算属性 二.监视属性 三.深度监视 一.计算属性 在开发中,可以有这样的需求,在属性(date)中,有fistName和lastName两个属性,需要将两个属性拼接起来,这种需求也很简单,有以下实现方式 1.插值语法实现 直接在body中将两个数据拼接 <div id="root"> 姓:<input type="text" v-model="fistName"&

  • Vue中computed计算属性和data数据获取方式

    目录 computed计算属性和data数据获取 解决方法一 解决方法二 computed计算属性取对象的值,第一次报错undefined 报错和打印值 解决方案 computed计算属性和data数据获取 获取到数据(对象.数组),截取一部分显示到页面中,用computed计算属性来实现截取数据然后直接输出到页面. <div class="detailBox"> <h1 class="detailHead">{{ActiveData.tit

  • Vue3 计算属性的用法详解

    目录 computed 计算属性说明 计算属性使用 总结 注意 上一篇博文说了 vue3 项目的 toRefs 函数和 toRef 函数,今天就稍微总结一下 vue3 的计算属性,其实学过 vue2 的宝子们应该都清楚,计算属性这个东西在项目开发过程中使用的还是比较频繁的,使用频率相对来说比较高,所以说咱今天稍微总结一下 vue3 项目中的计算属性,下面开始. computed 计算属性说明 computed 表示计算属性,通常的作用是用来进行数据处理,方便在末班中简化书写. 比如日常在模板中我

  • Vue computed 计算属性代码实例

    什么是计算属性??? 1.在computed中,可以定义一些属性,这些属性叫做[计算属性] 2.计算属性的本质是一个方法,不过一般是将他们的名称直接当做属性使用,不会当方法调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../lib/vue-2.4.0.js"></scri

  • Vue 监视属性之天气案例实现

    目录 天气案例实现 两个注意事项 监视属性 深度监视 监视的简写形式 天气案例实现 <div id="root"> <h2>今天天气很{{info}}</h2> <button @click="changeWeather">切换天气</button> </div> <script type="text/javascript"> Vue.config.product

  • Vue.js watch监视属性知识点总结

    这个属性用来监视某个数据的变化,并触发相应的回调函数执行 1.基本用法 (1)添加watch属性,值为一个对象.对象的属性名就是要监视的数据,属性值为回调函数,每当这个属性名对应的值发生变化,就会触发该回调函数执行 (2)回调函数有2个参数: newVal:数据发生改变后的值 oldVal:数据发生改变前的值 var vm = new Vue({ el:'#app', data: { name: '郭靖' }, watch: { name(newVal,oldVal){ console.log(

  • Vue中使用方法、计算属性或观察者的方法实例详解

    熟悉 Vue 的都知道 方法methods.计算属性computed.观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的,但是它们之间又存在一些不同之处,每一个都有一些适合自己的场景,我们要想知道合适的场景,肯定先对它们有一个清楚的了解,先看一个小例子. <div id="app"> <input v-model="firstName" type="text"&

  • vue中动态参数与计算属性的使用方法

    一,动态参数 从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数: <a v-bind:[attributeName]="url"> - 这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用.例如,如果你的 Vue 实例有一个 data property attributeName,其值为 "href",那么这个绑定将等价于 v-bind:hr

  • Vue中监视属性和计算属性区别解析

    目录 计算属性 需求 使用watch实现 准备工作 测试 测试 在computed当中书写 总结 计算属性 顾名思义,计算属性就是计算出来的属性,英文名儿computed这里要和data和methods里的东西区分,data里的属性,methods里的函数,你写的都会原封不动放到vm里,但是computed里面的东西写的是对象,最后放到vm里的是这个对象的名,值是get里的返回值. 下面看下Vue中监视属性和计算属性区别. 需求 我们将计算属性的案例使用watch写一遍 需求一揽 两个输入框 下

  • Vue监听属性和计算属性

    目录 一.watch监听属性 1.购物车 2.全选与取消全选 二.计算属性 1.computed 2.methods 3.setter 一.watch监听属性 这个属性用来监视某个数据的变化,并触发相应的回调函数执行. 基本用法添加watch属性,值为一个对象.对象的属性名就是要监视的数据,属性值为回调函数,每当这个属性名对应的值发生变化,就会触发该回调函数执行. 回调函数有2个参数: newVal,数据发生改变后的值. oldVal,数据发生改变前的值. 计数器: <!DOCTYPE html

  • Vue中的v-for循环key属性注意事项小结

    当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用"就地复用"策略.如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素. 为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性.key属性的类型只能为 string或者number类型. 在下面这个例子中,如果不给 p 元素绑定key,我先选中第一个, 然后输入ID和Nam

  • vue中v-for循环给标签属性赋值的方法

    1.给每个按钮添加class的属性值以及icon图标属性值,通过v-for实现自动添加样式,发现属性值无法显示,切记在属性前加上v-bind <html> <head> <meta charset="utf-8"> <title>v-for在线测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"> &

  • Vue中的 watch监听属性详情

    目录 一.watch监听一般数据的变化(数值,字符串,布尔值) 1.数值 2.字符串 3.布尔值 二.watch 监听 复杂类型数据的变化 1.对象 2.数组 3.对象数组 4.对象数组的属性 首先要确认 watch是一个对象,要当成对象来使用. 键:就是那个,你要监听的那个家伙: 值:可以是函数,当你监控的家伙发生变化时,需要执行的函数,这个函数有两个形参 第一个是当前值(新的值),第二个是更新前的值(旧值) 值也可以是函数名:不过这个函数名要用单引号来包裹. 值是包括选项的对象:选项包括有三

  • Vue中的 ref,props,mixin属性

    目录 ref props $attrs mixin ref ref 属性: 1.被用来给元素或子组件注册引用信息((id的替代者) 2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 3.使用方式: 打标识: <h1 ref="xxx">....</h1>或<School ref="xxx"></School> 获取: this.$refs.xxx 为了说明这个属性,我们重新写下相关

  • Vue中computed和watch有哪些区别

    计算属性computed: 支持缓存,只有依赖数据发生改变,才会重新进行计算 不支持异步,当computed内有异步操作时无效,无法监听数据的变化 computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed 如果computed属性属性值是函数,那么默认会走get方法:函数的返回值就是属性的属性

  • Vue 中的 computed 和 watch 的区别详解

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

随机推荐