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 数据同步

原生方法

<div id="app">
      <div>
        <div class="input-field">
          <label for="username">用户名：</label>
          <input
            id="username"
            type="text"
            @input="handleInput"
            :value="username"
          />
          <button @click="resetUsername">重置</button>
        </div>
        <div class="result">
          <p>你输入的用户名是：{{ username }}</p>
        </div>
      </div>
    </div>

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

V-model 实现

<div id="app">
      <div>
        <div class="input-field">
          <label for="username">用户名：</label>
          <input id="username" type="text" v-model="username" />
          <button @click="resetUsername">重置</button>
        </div>
        <div class="result">
          <p>你输入的用户名是：{{ username }}</p>
        </div>
      </div>
    </div>

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