浅谈Vue的属性,computed和watch

这篇具有很好参考价值的文章主要介绍了浅谈Vue的属性,computed和watch。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

语法

是什么?

直接上demo,了解一下语法先~

<template>
    <div>
      <p>num1为{{ num1 }}</p>
      <p>num2为{{ num2 }}</p>
      <p>num1+num2={{ result }}</p>
      <button @click="incrementNum1">num1+1</button>
      <button @click="incrementNum2">num2+2</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        num1: 1,
        num2: 2
      };
    },
    // computed对象里面的值,能够根据其依赖发生的变化而变化,形象说,它是y,x发生变化,y自动发生变化
    computed: {
      result() {
        return this.num1 + this.num2;
      }
    },
    // watch
    watch: {
        num1(newValue, oldValue) {
            console.log(`num1 changed from ${oldValue} to ${newValue}`);
        },
        num2(newValue, oldValue) {
            console.log(`num2 changed from ${oldValue} to ${newValue}`);
        },
        result(newValue, oldValue) {
            console.log(`result changed from ${oldValue} to ${newValue}`);
        }
    },
    methods: {
      incrementNum1() {
        this.num1++;
      },
      incrementNum2() {
        this.num2=this.num2+2;
      }
    }
  };
  </script>
<style>
button{
    display: block;
    margin-top: 20px;
}
</style>  

相同点

conputed是计算属性,watch是监听属性,本质上都是同一个watcher实例,它们都是通过响应式系统与数据,页面建立通信

不同点

  1. computed带有"懒计算"功能

  2. 监听的逻辑有差异:computed是依赖的值变了,它去重新求值,watch是目标值变了,它去执行函数

  3. 深层到代码:在数据更新时, 计算属性的dirty状态会立即改变, 而监听属性与组件重新渲染, 至少都会在下一个"tick"执行,故监听属性是异步触发的文章来源地址https://www.toymoban.com/news/detail-799872.html

到了这里,关于浅谈Vue的属性,computed和watch的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3的computed计算属性和watch监视(四)

    监视【ref】定义的【基本数据】类型 监视【ref】定义的【对象类型】数据 监视【reactive】定义的【对象类型】数据  与 场景二 不同的是,newVal和oldVal是一样的,表明通过Object.assign重新赋值的时候,并不是生成一个新的对象,而是新的值覆盖了旧值 监视【ref】或者【reactiv

    2024年02月21日
    浏览(45)
  • 【vue2】计算属性(computed)与侦听器(watch)详解

    🥳博       主: 初映CY的前说(前端领域) 🌞个人信条: 想要变成得到,中间还有做到! 🤘本文核心: 计算属性与侦听属性的用法 目录( 文末有给大家准备好的Xmind思维导图 ) 一、计算属性computed ①默认get()方法,仅是获取值 ②不仅仅是获取值,还具有修改属性功能

    2024年01月16日
    浏览(52)
  • Vue3 计算属性和侦听器实战(computed、watch)——简易点餐页面

    这篇文章记录一下 Vue3 计算属性和侦听器 (computed、watch) 实战的内容,这篇文章我们在有计算属性和侦听器的基础上,我们来制作一个简易点餐页面,接下来我们一起来从零到一开始制作。 计算属性和侦听器相关文章推荐: 深入与浅谈 Vue 中计算属性和侦听器的区别和使用

    2024年02月09日
    浏览(100)
  • 【Vue2从入门到精通】Vue监听器watch,计算属性computed,方法methods的区别及使用场景

    ✍创作者:全栈弄潮儿 🏡 个人主页: 全栈弄潮儿的个人主页 🏙️ 个人社区,欢迎你的加入:全栈弄潮儿的个人社区 📙 专栏地址:vue2从入门到精通 【分享几个国内免费可用的ChatGPT镜像】 【10几个类ChatGPT国内AI大模型】 【用《文心一言》1分钟写一篇博客简直yyds】 【用

    2023年04月15日
    浏览(49)
  • 前端学习---vue2--选项/数据--data-computed-watch-methods-props

    写在前面: vue提供了很多数据相关的。 简单的说就是进行双向绑定的区域。 vue实例的数据对象,会把data的数据转换成getter和setter,从而可以进行响应式的变化, vue实例创建后,可以通过vm.$data.x获取data里面的x,但同时vue实例也代理了其中的对象,所以我们一般使用简单的

    2024年02月14日
    浏览(41)
  • Vue.js 中的 watch 属性详解

    在 Vue.js 中, watch 属性是一种非常重要的属性,它可以监听 Vue 实例中指定的数据变化,并在数据发生变化时执行相应的操作。本文将对 Vue.js 中的 watch 属性进行详细的介绍,并附上相关的代码示例。 在 Vue.js 中, watch 属性被定义为一个对象,它可以用来监听 Vue 实例中的数

    2024年02月07日
    浏览(45)
  • Vue3前端开发,computed计算属性的基础练习

    Vue3前端开发,computed计算属性的基础练习! 在新版里面,和传统的vue2一样,计算属性,都是对一些数据运算进行了封装操作。返回结果是一个实时监控的效果。区别在于,写法不同。效果是一样。 下面给大家展示一个简单的案例。 如图,自定义一个组件,ComputedDemo.vue。里

    2024年01月18日
    浏览(50)
  • js中对象的属性要注意的点以及在vue中watch对象的属性的方法

    取对象值有两种方式, const obj={ a:\\\'1\\\' } obj.a或者obj[\\\'a\\\'],中括号还可以写成 const name = \\\'a\\\' obj[name]和obj[\\\'a\\\']是一个意思。 然后在vue的watch要监听对象的属性,写法是 watch:{ \\\'obj.a\\\'(new,old){} } 这样的方式。 然后对象的深度拷贝可以通过自己手写递归来实现,也可以通过JSON.parse(JSON.str

    2024年02月21日
    浏览(49)
  • 在 Vue.js 中,使用 watch 监听data变量如:对象属性/data变量

    在 Vue.js 中,使用 `watch` 监听对象属性 的变化时,应该将属性名作为 字符串 传递给 `watch` 选项。 示例如下: ```javascript updateAddChuZhenForm函数 现在,当 `isCheck1` 或 `isCheck2` 的值发生变化时,相应的 `watch` 函数将被触发。 ``` 如果你想要 监听一个普通变量 ,而 不是 Vue 实例的属

    2024年02月09日
    浏览(45)
  • 学习Vue:computed VS watch

    在 Vue.js 中,Vue 实例与数据绑定不仅限于简单的插值表达式和指令。在实际开发中,您可能会遇到更复杂的数据处理需求。为此,Vue 提供了计算属性和侦听器这两个强大的工具,让您能够更灵活地处理和响应数据变化。 计算属性是 Vue 实例中的一个特殊属性,它允许您定义一

    2024年02月12日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包