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或组件实例对象。
相关推荐
伍哥的传说35 分钟前
React & Immer 不可变数据结构的处理
前端·数据结构·react.js·proxy·immutable·immer·redux reducers
90后的晨仔1 小时前
从传统 CSS 到 Vue 的 Class 与 Style 动态绑定全解
前端·vue.js
拾光拾趣录1 小时前
前端灵魂拷问:10道题
前端·面试
阿丽塔~2 小时前
【vue3+vue-pdf-embed】实现PDF+图片预览
javascript·vue.js·pdf
独泪了无痕2 小时前
Vite 模块动态导入之Glob导入
前端·vue.js·vite
xdpcxq10292 小时前
Docker用Web应用实例深入容器
前端·docker·容器
超浪的晨3 小时前
JavaWeb 入门:JavaScript 基础与实战详解(Java 开发者视角)
java·开发语言·前端·javascript·后端·学习·个人开发
tianchang3 小时前
React Hook 解析(二):`useEffect` 与 `useLayoutEffect`
前端·react.js
codervibe3 小时前
使用 Vue3 + Axios 与 Spring Boot 高效对接(含 token 处理)
前端·vue.js
云边散步3 小时前
《校园生活平台从 0 到 1 的搭建》第五篇:商品后端
前端·后端