总结:

     computed和watch之间的区别:
            1.computed能完成的功能,Watch都可以实现
            2.watch能完成的功能,computed不一定能完成,比如:watch可以进行异步操作
        两个重要的小原则:
            1.所被vue管理的函数,最好写成普通函数,这样this指代的才是vm或组件实例对象
            2.所有不被vue所管理的函数(定时器的回调函数、ajax的回调函数、promise的回调函数)
              最好写成箭头函数,这样this的指向才是vm或组件实例对象。
1.姓名案例_computed实现
 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>姓名案例_计算属性</title>
8 <!-- 引入vue -->
9 <script type="text/javascript" src="../js/vue.js"></script>
10 </head>
11 <body>
12 <!-- 准备一个div容器 -->
13 <div id="root">
14 姓:<input type="text" v-model="firstName"><br/><br/>
15 名:<input type="text" v-model="lastName"><br/><br/>
16 全名:<span>{{fullName}}</span>
17 </div>
18 </body>
19 <script type="text/javascript">
20 Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
21 const vm = new Vue({
22 el:'#root',
23 data:{
24 firstName:'张',
25 lastName:'三'
26 },
27 computed:{
28 /* 只读不改的简写,实际这里的函数相当于get */
29 fullName(){
30 console.log('get被调用了')
31 return this.firstName + '-' + this.lastName
32 }
33 }
34
35 })
36 </script>
37 </html>

2.姓名案例_watch实现
 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>姓名案例_watch实现</title>
8 <!-- 引入vue -->
9 <script type="text/javascript" src="../js/vue.js"></script>
10 </head>
11 <body>
12 <!-- 准备一个div容器 -->
13 <div id="root">
14 姓:<input type="text" v-model="firstName"><br/><br/>
15 名:<input type="text" v-model="lastName"><br/><br/>
16 全名:<span>{{fullName}}</span>
17 </div>
18 </body>
19
20 <script type="text/javascript">
21 Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
22 const vm = new Vue({
23 el:'#root',
24 data:{
25 firstName:'张',
26 lastName:'三',
27 fullName:'张-三'
28 },
29 watch:{
30 firstName(newValue){
31 this.fullName = newValue + '-' + this.lastName
32 },
33 lastName(newValue){
34 this.fullName = this.firstName + '-' + newValue
35 }
36 }
37 })
38 </script>
39 </html>

watch能完成异步操作,computed不能完成。

 
 

watch对比computed的更多相关文章

  1. vue 生命周期钩子的理解 watch computed

    一  理解vue的生命周期,首先需要注意几个关键字 1. el :选择器 2. $el:对应选择器的template模板(html代码) 3. render:也是vue实例中的一项,其参数更接近vue ...

  2. vue计算属性computed和methods的区别

    computed和methods的区别 在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue. com ...

  3. computed属性和watcher

    computed属性 在模板中使用表达式是非常方便直接的,然而这只适用于简单的操作.在模板中放入太多的逻辑,会使模板过度膨胀和难以维护.例如: <div id="example&quo ...

  4. computed、methods、watch

    computed:计算属性将被混入到 Vue 实例中.所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例. methods:methods 将被混入到 Vue 实例中 ...

  5. vue学习笔记4

    父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewModel var vm = ne ...

  6. vue学习笔记3

    Vue.js - Day3 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即 ...

  7. Vue2 学习笔记5

    文中例子代码请参考github watch属性的使用 考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变:(用以前的知识如何实现???) 监听data中属性的改变 ...

  8. Vue.js - Day4

    父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script>   // 创建 Vue 实例,得到 ViewModel   var vm ...

  9. Vue.js - Day3

    定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不同: ...

  10. 06-Vue路由

    什么是路由 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源: 对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有 ...

随机推荐

  1. linux 无法找到“/usr/bin/core_perl/gcc” vscode

    解决问题的思路 查看有没有gcc,没有安装 有的话就是,修改安装路径就可以? "/usr/bin/core_perl/gcc".修改成Gcc的绝对路径 我的修改是./usr/bin ...

  2. Django使用Bootstrap的经典方法

    前面的话 Bootstrap是简单.灵活的用于搭建WEB页面的HTML.CSS.Javascript的工具集.Bootstrap基于HTML5和CSS3,具有漂亮的设计.友好的学习曲线.卓越的兼容性, ...

  3. RabbitMq消息队列进一步认识

    参考:https://www.cnblogs.com/wanglijun/p/10896896.html(应用场景) https://blog.csdn.net/weixin_41588751/art ...

  4. hibernate之createQuery与createSQLQuery

    信息: java.lang.ClassCastException: [Ljava.lang.Object; cannot be cast to com.miracle.dm.doc.catalog.m ...

  5. 关于linux系统版本的一个分类展现

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文发布于 2014-07-06 22:58:35 ...

  6. Android 圆形进度条ProgressBar实现固定进度

    原文: Android 圆形进度条ProgressBar实现固定进度-Stars-One的杂货小窝 之前遇到一个问题,发现Android里的圆形进度条无法固定一个进度,记录一下解决方法 探究 假设我们 ...

  7. Java博客大汇总

    目录介绍 01.Java基础[30篇] 02.面向对象[15篇] 03.数据结构[27篇] 04.IO流知识[11篇] 05.线程进程[9篇] 06.虚拟机[12篇] 07.类的加载[7篇] 08.反 ...

  8. Markdown的习题

    markdown的使用说明 习题1: 将这段话改为2级标题 习题2 试着在你的'Typora'中编辑下面的内容: 这是第一行 这是第2行 这是补充内容 这是第3行 习题3 将下面的内容改为指定的格式要 ...

  9. FreeRTOS教程10 低功耗

    1.准备材料 正点原子stm32f407探索者开发板V2.4 STM32CubeMX软件(Version 6.10.0) Keil µVision5 IDE(MDK-Arm) 野火DAP仿真器 XCO ...

  10. cmake:针对某些依赖 openssl-1.0 而机器上还有其他版本的 openssl

    指定下列变量: -DOPENSSL_INCLUDE_DIR:指向 openssl-1.0 的 include 目录 -DOPENSSL_SSL_LIBRARIES:指向 openssl-1.0 的 l ...