计算属性：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. 封装带SSH跳板机的MYSQL

    一.封装带SSH跳板机的MYSQL 二.配置settting import pymysql from sshtunnel import SSHTunnelForwarder class MyDb(ob ...

  2. 自动更新文件夹下所有DLL 至最新修改时间版本

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  3. 前端js数据加密解密

    一.最简单的加密解密   函数escape()和unescape(); 二.base64加密 (1)introduction base64是网络上最常见的用于传输8bit字节码的编码方式之一,base ...

  4. linux下编译安装ACE-6.4.2（adpative communication environment）

    1.环境 CentOS-6.5-x86_64-bin-DVD1.iso VMware_workstation_full_12.5.2 (2).exe ACE-6.4.2.tar.gz 下载链接:htt ...

  5. Google Protocol Buffers 快速入门（带生成C#源码的方法）

    Google Protocol Buffers是google出品的一个协议生成工具,特点就是跨平台,效率高,速度快,对我们自己的程序定义和使用私有协议很有帮助. Protocol Buffers入门: ...

  6. linux 基础学习常见问题

    1.当命令行还在运行不能输入任何东西时,按ctrl+c       停掉那个正在运行.

  7. Topic与Partition

  8. 开题报告中如何将一段文字插入到word表格中

    1,举例如下,打开空白word,设计一个20列的表格.任意一段文字. 2,选中这段文字,点击替换按钮.查找内容为“?”,替换为“^&,”(后面是逗号),并勾选“使用通配符”. 3,全部替换得到 ...

  9. Kubernetes Dashboard的安装与坑【h】

    1.前言 https://github.com/kubernetes/dashboard/releases kubectl apply -f https://raw.githubusercontent ...

  10. OpenCV图像平移

    图像平移是将图像的所有像素坐标进行水平或垂直方向移动,也就是所有像素按照给定的偏移量在水平方向上沿x轴.垂直方向上沿y轴移动.这种操作分为两种,一种是图像大小不改变,这样最后原图像中会有一部分不在图像 ...