vue学习（五） watch computed

雨点打透心脏的1/2处 2022-04-22 09:21 222阅读 0赞

使用技术属性和监听属性会自带缓存，当依赖的属性发生变化时，才会重新生成

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;{
       {fullname()}}&lt;/div&gt;

&lt;script&gt;
        var app=new Vue({
            el:"#app",
            data:{
                firstname:'hello',
                secondname:'vue',
                //fullname:'hello vue'
            },
           /* computed:{
                fullname:function () {
                    console.log("这里会带有缓存")
                    return this.firstname+"---"+this.secondname;
                }
            },*/
           /* watch:{
                firstname:function () {
                    console.log("这里会带有缓存")
                    this.fullname=this.firstname+"---"+this.secondname;
                },
                secondname:function () {
                    this.fullname=this.firstname+"---"+this.secondname;
                }
            }*/
           methods:{
               fullname:function () {
                   console.log("这里会带有缓存")
                   return this.fullname=this.firstname+"---"+this.secondname;
               }
           }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

发表评论取消回复

表情：

评论列表（有 0 条评论，222人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue-methods,watch和computed

案例把firstName和lastName组合成fullName 为keyup事件绑定方法 <body> <div id="a

朱雀/ 2023年06月30日 01:47/ 0 赞/ 25 阅读

相关 Vue computed，watch本质区别

> 今日项目需要一个详细的权限配置，如：路由权限，页面tabs权限，操作权限；而路由权限大都知道就不赘述，而操作权限这就涉及页面中每个按钮了，这里使用VUEX进行管理 1.

小灰灰/ 2023年02月27日 13:45/ 0 赞/ 37 阅读

相关 Vue学习（watch、computed、生命周期、filter）- 学习笔记

文章目录 Vue学习（watch、computed、生命周期）- 学习笔记 watch 监听 computed 计算

电玩女神/ 2023年01月23日 12:57/ 0 赞/ 210 阅读

相关 vue3 computed和watch

学习笔记记录（内容来源于官网） computed vue3 计算属性和vue2变化不大，只需要注意，它返回的是一个响应式的ref对象,所以在使用的时候需要.value(

迈不过友情╰/ 2023年01月20日 09:45/ 0 赞/ 21 阅读

相关 Vue 中 watch 和 computed 区别

computed与watch的差异 1）computed 是计算一个新的属性，并将该属性挂载到 Vue 实例上，而 watch 是监听已经存在且已挂载到 Vue 实例上的

た入场券/ 2022年12月29日 09:37/ 0 赞/ 252 阅读

相关 vue computed和watch的区别

computed 在computed中定义的每一个计算属性，都会被缓存起来，只有当计算属性里面依赖的一个或多个属性变化了，才会重新计算当前计算属性的值。 1. 支持数据的

素颜马尾好姑娘i/ 2022年10月30日 15:29/ 0 赞/ 288 阅读

相关 vue computed和watch详解

1.概念 computed(计算属性)和watch(监听器)都是以vue的依赖追踪机制为基础的，当依赖数据发生变化时，依赖此数据的相关数据会自动变化 2.应用场景

我不是女神ヾ/ 2022年05月20日 08:19/ 0 赞/ 293 阅读

相关 vue学习（五） watch computed

使用技术属性和监听属性会自带缓存，当依赖的属性发生变化时，才会重新生成 <table> <tbody> <tr> <td> <pre><code>&l

雨点打透心脏的1/2处/ 2022年04月22日 09:21/ 0 赞/ 223 阅读

相关 Vue之watch和computed

watch用于监控自身属性变化和监控路由对象计算属性computed的特点计算属性会依赖于他使用的data中的属性，只要是依赖的属性值有改变，则自动重新调用一下计

淩亂°似流年/ 2022年04月18日 01:30/ 0 赞/ 334 阅读

相关【Vue】学习笔记六：watch和computed

文章目录 @\[TOC\] \`watch\`属性的使用 \`computed\`计算属性 \`watch\`、\`computed\`和\`methods\`之间的

亦凉/ 2021年09月21日 02:42/ 0 赞/ 383 阅读