计算属性：computed  监听多个变量且变量是在vue实例中(依赖某个变量，变量发生改变就会触发)

侦听器：   watch        监听一个变量的变化

使用场景：watch(异步场景)   computed(数据联动)

demo:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>computed 和 watch</title>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>

</head>

<body>

    <div id="app">

        watch：{{msg}}

        <div>computed：{{msg1}}</div>

    </div>

    <script>

        var app = new Vue({

            el:'#app',

            data:{

                msg:'message',

                other:'word'

            },

            watch:{

                msg(newVal,oldVal){

                    console.log('msg:' + newVal);

                    console.log('msg:' + oldVal);

                }

            },

            computed:{

                msg1(){

                    return this.msg  +'   ' + this.other

                }

            }

        });

        app.msg = 'Hello';

        app.other = '小红'

    </script>

</body>

</html>

【vue】computed 和 watch的更多相关文章

  1. vue computed 原理

    vue computed 主要依靠数据依赖来更新,这里不展示computed源代码,只展示核心思想. computed: { a(){ return this.b ++ } } data:{ b: 1 ...

  2. Vue computed props pass params

    Vue computed props pass params vue 计算属性传参数 // 计算 spreaderAlias spreaderAlias () { console.log('this. ...

  3. vuex bug & vue computed setter

    vuex bug & vue computed setter https://vuejs.org/v2/guide/computed.html#Computed-Setter [Vue war ...

  4. vue computed、methods、watch的区别

    1.computed(计算属性)computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上), 2.methods(方法)写在html中的时候需要带()支持传参,且需要有触发条件 ...

  5. Vue computed属性

    computed vs methods 我们可以使用Vue中的method计算出学科的总分,最终得到的总数结果是相同的. 在上例的基础上,我们把computed区块中的totalMarks函数整体移到 ...

  6. 深入理解 Vue Computed 计算属性

    Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"> <p> ...

  7. vue computed的执行问题

    1.在new Vue()的时候,vue\src\core\instance\index.js里面的_init()初始化各个功能 function Vue (options) { if (process ...

  8. vue computed 可以使用getter和setter

    var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // ...

  9. Vue -computed传参数

    vue 中computed想传递参数怎么办? 闭包在这里起到的重要的作用 <input v-model="newItem(key,val)" type="text& ...

  10. vue - computed

    computed 的作用主要是对原数据进行改造输出.改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号……. 一.格式化输出结果: 我们先来做个读出价格的例子:我们读书的原始数据是price:1 ...

随机推荐

  1. 用第三方工具类，将JavaBean、List、Map<String,Object>转成JSON文本

    导入第三方jar包: >commons-beanutils-1.7.0.jar >commons-collections-3.1.jar >commons-lang-2.5.jar ...

  2. 一百零二：CMS系统之sweetalert提示框和使用

    实现效果 css body.stop-scrolling { height: 100%; overflow: hidden; } .sweet-overlay { background-color: ...

  3. 科大讯飞sdk语音合成工具类

    注:主要是dll文件的配置 A:Java SDK 使用了 JNI 形式,在初始化 SDK 时,SDK 将加载共享库(Windows下为msc32.dll或msc64.dll文件,Linux下libms ...

  4. quartz定时任务表达式案例

    表示式 说明 "0 0 12 * * ? " 每天12点运行 "0 15 10 ? * *" 每天10:15运行 "0 15 10 * * ?&quo ...

  5. Linux 查看修改SWAP大小

    1  查看swap 空间大小(总计):     # free -m          默认单位为k, -m 单位为M                total       used       fre ...

  6. python-Web-django-后台

    url: # member 处理 re_path('member/list/', member.list, name='member/list/'), re_path('member/list_par ...

  7. Nginx反向代理，Nginx的TCP/UDP调度器以及Nginx常见问题处理

    nginx反向代理: 方案 使用4台RHEL7虚拟机,其中一台作为Nginx代理服务器,该服务器需要配置两块网卡,IP地址分别为192.168.4.5和192.168.2.5,两台Web服务器IP地址 ...

  8. 产品之我见（3）-ZEN在产品上的延伸

    ZEN 在WIKIPEDIA上的解释是这样的: 禅,禅宗强调严格的自我控制能力,冥想实践,洞察到的事物性质,而这种洞察力在日常生活中的个人表达,尤其是为了别人的利益. 因此,它不再强调对经典和学说的了 ...

  9. python常见队列queue分类

    import queue # 1.普通q# 2.先进后出q# 3.优先级q 普通Queue q=queue.Queue(3)q.put(1)q.put(2)q.put(3)print(q.get()) ...

  10. Python全栈开发之6、面向对象

    一.创建类和对象 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 对象,根据模板创建的实例 ...