计算属性：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. PHP遍历目录下的文件夹和文件 以及遍历文件下内容

    1.遍历目录下的文件夹和文件: public function bianli1($dir) { $files = array(); if($head = opendir($dir)) { while( ...

  2. hibernate关联映射之多对多

    package loaderman.c_many2many; import java.util.HashSet; import java.util.Set; /** * 开发人员 * * */ pub ...

  3. hk clearing participant & Exchange Participant of SEHK

    https://www.hkex.com.hk/-/media/HKEX-Market/Services/Clearing/Securities/Infrastructure/CCASS-3-Term ...

  4. mock的使用

    mock的重要性 mock就是对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建的方法.项目开发和测试过程中,遇到以下的情况时,就需要模拟结果返回. 1.当另一方接口或服务还未完成,阻碍项 ...

  5. Swift3.0添加桥接文件

    注意是在target下不是project !!!纠结了好久表示...... 都这里一直编译错误,找不到该桥接文件,这里也是纠结了好久......最后原因是不能使用下划线就可以了....<表示这是 ...

  6. Python3 Selenium自动化web测试 ==>FAQ：隐式等待和sleep区别

    FAQ: 情景1: 设置等待时间 A方法:sleep 线程休眠,但只单次有效,其他操作需要加载等待时间,需要再次添加time.sleep() B方法:implicitly_wait() from se ...

  7. 3.React中的setstate的几个现象

    转载segfault 上面的一篇文章,https://segmentfault.com/a/1190000014498196 1.在同一个方法中多次setState是会被合并的,并且对相同属性的设置只 ...

  8. AssetBundle资源打包与加载

    AssetBundle资源打包  1.AssetLabels资源标签 文件名:资源打包成AssetBundle后的文件名,类似于压缩包的名字 后缀:自定义 文件名和后缀名都是小写格式(大写会自动转为小 ...

  9. 日常小节----unity小坑记（静态后不可移动和旋转）

    当物体被置为静态时,模型网格是无法移动和旋转的,只有碰撞器可以. 也就是会出现当父物体不为静态,子物体为静态时,运行后旋转移动父物体,子物体模型网格不会跟随旋转移动,但子物体碰撞器会跟随旋转移动. 或 ...

  10. hdoj6446(树形DP)

    题目链接:https://vjudge.net/problem/HDU-6446 题意:简化题意后就是求距离和的2*(n-1)!倍. 思路: 简单的树形dp,通过求每条边的贡献计算距离和,边(u,v) ...