Vue.js从入门到跑路-方法、计算属性和侦听器

方法

要为组件添加一个方法，我们可以用到 method 选项

//用于声明要混入到组件实例中的方法。
            methods: {
            }

我们来实现一个显示全名

{{ getFullName }}

data() {
        return {
          firstName: 'John',
          lastName: 'Doe',
        };
      },
      methods: {
        getFullName() {
          return this.firstName + ' ' + this.lastName;
        },
      },

注解

@是指令 v-on 的简写，可以给元素绑定事件侦听器

方法中的 this` 指向当前活跃的组件实例

计算属性

我们用 computed 选项来声明要在组件实例上暴露的计算属性。

computed: {
            }

我们同样实现一个显示全名

{{ fullName }}

computed: {
        fullName() {
          return this.firstName + ' ' + this.lastName;
        },
      },

注意事项：计算属性的 getter 而没有任何其他的副作用，避免直接修改计算属性值

Watch 侦听器

使用 watch 选项在每次响应式属性发生变化时触发一个函数。

watch:{}

我们来实现一个侦听名字变化

<h1>Full Name: {{ fullName }}</h1>
    <button @click="changeFirstName">Change First Name</button>
    <button @click="changeLastName">Change Last Name</button>
    <p>Last Name: {{ lastName }}</p>

data() {
        return {
          firstName: 'John',
          lastName: 'Doe',
        };
      },
      methods: {
        changeFirstName() {
          this.firstName = 'Jane';
        },
        changeLastName() {
          this.lastName = 'Smith';
        },
      },
      watch: {
        firstName(newVal, oldVal) {
          console.log(`Watch: First Name changed from ${oldVal} to ${newVal}`);
        },
        lastName(newVal, oldVal) {
          console.log(`Watch: Last Name changed from ${oldVal} to ${newVal}`);
        },
      },
    });

可以看到当我们点击按钮，改变了firstName和lastName的值，控制台就提示了

watch 默认是浅层的：被侦听的属性，仅在被赋新值时，才会触发回调函数——而嵌套属性的变化不会触发。如果想侦听所有嵌套的变更，你需要深层侦听器：

handler() {},
          deep: true,

handler 设置一个回调函数，侦听属性变化，deep 设置为 true，vue 会侦听所有属性的变化

示例：

data() {
        return {
          person: {
            firstName: 'John',
            lastName: 'Doe',
          },
        };
      },
      methods: {
        changePerson() {
          this.person.firstName = 'Jane';
          this.person.lastName = 'Smith';
        },
      },
      watch: {
        person: {
          handler(newVal, oldVal) {
            console.log('Watch: Person changed');
            console.log('New Value:', newVal);
            console.log('Old Value:', oldVal);
          },
          deep: true,
        },
      },

这样，无论你修改了 person 对象中的哪个属性，都会触发深层侦听器的回调函数。

另外还有几个属性

immediate: true

设置为 true 会强制立即执行回调，即在组件实例创建时会立即调用

once: true

设置为 true 时，回调函数只在属性变化时触发一次

flush: 'post'

使侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM

flush: 'sync'

在 Vue 进行任何更新之前触发

unwatch()

停止侦听器我们可以使用$watch()方法来命令式地创建一个侦听器上文的代码可以改写如下

this.$watch('person', (newVal, oldVal) => {
          console.log('Watch: Person changed');
          console.log('New Value:', newVal);
          console.log('Old Value:', oldVal);
        }, { deep: true });

计算属性和方法的区别

我们在上文的示例的计算属性和方法中都添加一个 console.log

观察浏览器控制台我们可以发现

计算属性fullName使用console.log来打印一条消息，以验证其是否被调用。每当firstName或lastName发生更改时，计算属性会自动重新计算并更新相应的文本。

方法getFullName同样使用console.log来打印一条消息，但它只有在模板中调用时才会执行。

同一个函数用计算属性和方法的不同之处

在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。

计算属性适合做简单的操作，而方法适合做复杂的操作，通常作为事件侦听和公共业务逻辑使用。

计算属性和 watch 的区别

计算属性适合简单的业务逻辑，而 watch 适合耗时的操作

计算属性有返回值而 watch 没有

方法和 watch 的区别

方法可以在 watch 中调用而 watch 不行

方法可以有返回值而 watch 没有