计算属性：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. 使用UltraISO制作linux系统安装u盘启动盘

    1.首先打开UltraISO软件,尽量下载最新版的,小编曾用某个旧版的UltraISO,制作的安装盘,不能不能识别磁盘,安装失败! 2.点击工具栏中的第二个打开镜像文件工具,如图红色方框标志按钮,然后 ...

  2. ios wkwebview allowFileAccessFromFileURLs

    最近在做 cordova 打包 ios 的项目(webpack 打包 vue项目后,再用 cordova 打包).在加载 file:/// 协议时因为 webview安全机制有一些报错.SK各种找解决 ...

  3. 图解Python 【第二篇】：Python基础2

    本节内容一览图 一.数据类型 1.数字 2 是一个整数的例子.长整数 不过是大一些的整数.3.23和52.3E-4是浮点数的例子.E标记表示10的幂.在这里,52.3E-4表示52.3 * 10-4. ...

  4. java IO流的API

    常用的IO流API有:[InputStream.OutputStream] [FileInputStream.FileOutputStream] [BufferedInputStream.Buffer ...

  5. linux简单命令10---权限

    1:文件权限设置 数字的用法:chmod 755 文件名 ---------------------------------------------下面是文件权限------------------- ...

  6. PHP yii2.0框架利用mpdf导出pdf

    安装: composer require mpdf/mpdf 使用: use Mpdf\Mpdf;//(php7以前) //获取页面内容 $res = $this->controller-> ...

  7. 一次神奇的JVM调优

    老张接个新项目,项目可是不小,好多模块.使用Intellij import new project, 结果卡在writing class中,而且mac的风扇一直转,像是要变成直升机起飞. 等啊等,in ...

  8. Java泛型(5)：擦除与补偿

    先看一个例子: Class<?> c1 = new ArrayList<String>().getClass(); Class<?> c2 = new ArrayL ...

  9. 导出设计文档总结 plantUML Graphviz jacob

    plantUML https://blog.csdn.net/HelloWorld998/article/details/90676496 http://skyao.github.io/2014/12 ...

  10. Mrchen测试人生

    auto:chenyq date:20190920 data:今天是我从事10年IT软件测试工作来的 开始写技术博客的第一次,希望今后能给互联网需要查询技术知识带来方便: 说起我的测试人生 路也走了1 ...