Vue 学习笔记-2022/12/04

一、计算属性、方法、监听器的区别和应用场景

1.计算属性 computed

computed可以根据data里面的属性进行一些稍微复杂的运算例如数组过滤和筛选的情况，computed一般不会修改 data 属性里面的值，

2.方法 methods

computed能做的 methods 几乎都能做到，不管是在html模版使用还是在事件里使用（在模版里调用需要加上小括号），但是为什么不直接都用 methods 去替代computed 呢，computed 能在使用的时候把计算结果缓存起来，在组件刷新的时候，如果 Data 里面的属性没有发生变化，那么 Vue 就会直接从缓存里取出计算结果，而 methods 则会每次计算而不会缓存结果，对于数据量比较大的情况下，效率就较差。对于 data 属性来说，只有 computed 属性来说只有 Data 里面的值发生变化才会重新结算.

3. 监听器 watch

watch 则是监听 data属性的值发生变化直接去修改data属性的值，根据自己的业务场景去操作，不会返回值，也不能直接从 html 模版里面使用

watch 一般适合耗时的异步操作，watch 也能直接去调用 methods 的方法

二、V-model

双向绑定：输入框的值和 data 等属性值互相同步

v-model简化了 @input 和 :value 数据同步

用户名：
id="username"

type="text"

@input="handleInput"

:value="username"

/>
你输入的用户名是：{{ username }}

// 需要手动设置值
const app = Vue.createApp({
  data() {
    return {
      username: "",
    };
  },
  methods: {
    handleInput(e) {
      this.username = e.target.value;
    },
    resetUsername() {
      this.username = "";
    },
  },
});
app.mount("#app");

用户名：
你输入的用户名是：{{ username }}

// 不需要手动设置值 v-model自动实现了数据同步
const app = Vue.createApp({
  data() {
    return {
      username: "",
    };
  },
  methods: {
    // handleInput(e) {
    //   this.username = e.target.value;
    // },
    resetUsername() {
      this.username = "";
    },
  },
});
app.mount("#app");