vue学习路线(11.watch对比computed)

一、通过案例对比computedwatch

姓名案例(输入框分别输入姓和名,全名展示姓名的组合)

1.通过computed实现

xml 复制代码
  <body>
    <div id="app">
      姓:<input v-model="firstName" /><br /><br />
      名:<input v-model="lastName" /><br /><br />
      全名:<span>{{fullName}} </span>
    </div>
    <script type="text/javascript">
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            firstName: "张",
            lastName: "三",
          };
        },
        computed: {
          fullName() {
            return this.firstName + "-" + this.lastName;
          },
        },
      });
    </script>
  </body>

2.通过watch实现

xml 复制代码
  <body>
    <div id="app">
      姓:<input v-model="firstName" /><br /><br />
      名:<input v-model="lastName" /><br /><br />
      全名:<span>{{fullName}} </span>
    </div>
    <script type="text/javascript">
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            firstName: "张",
            lastName: "三",
            fullName: "",
          };
        },
        watch: {
          firstName(val) {
            this.fullName = val + "-" + this.lastName;
          },
          lastName(val) {
            this.fullName = this.firstName + "-" + val;
          },
        },
      });
    </script>
  </body>

二、总结computedwatch之间的区别

    1. computed能完成的功能,watch都可以完成。
    1. watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。

三、两个重要的小原则

    1. 所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
    1. 所有不被vue所管理的函数 (定时器的回调函数、ajax的回调函数、Promise的回调函数等) ,最好写成箭头函数。这样this的指向才是vm或组件实例对象。
相关推荐
zwjapple1 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem4 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理4 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall4 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴5 小时前
简单入门Python装饰器
前端·python