【Vue.js相关的方法】

相关方法

1.created():

在实例创建完成后调用，可以在这个方法中进行数据初始化和其他一些操作。

`new Vue({

el: '#app',

created: function () {

// 在这里可以进行一些初始化工作

}

})`

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/6a6114ca1e074c2a961fb2851982af24.png

2.mounted():

在实例挂载后调用，可以在这个方法中进行DOM操作或者调用第三方库初始化。

    mounted: function () {

    // do something

    }

3.updated():

在Vue中，某些操作可能会引起数据的变化，例如异步请求、DOM操作等。如果我们需要在数据更新完成之后执行某些操作，就可以选择在updated钩子函数中调用这些操作，以保证它们能够在数据更新之后执行。

updated() {
// updated函数中的操作
}

4.destroyed():

在实例销毁之前调用，可以在这个方法中进行一些清理操作，比如清除定时器或者解绑事件。

new Vue{
destroyed(){

}

5.methods:

定义组件内可调用的方法，可以在模板中通过v-on指令调用这些方法。

methods: {

  sayHello() {

    console.log('Hello!');

  }

}

6.computed:

定义计算属性，可以根据数据的变化动态计算属性的值。

computed: {
  propertyName: function() {
    // 计算并返回属性的值
  }
}

7.watch:

监听数据的变化，并在数据变化时执行相应的操作。
1】handler 方法
其实我们平时写的 watch 方法都是会去默认执行这个 handler 方法的

watch: {
  name: {
    handler(newVal, oldVal) {
      console.log(newVal, oldVal);
    }
  }
}

【2】immediate 属性
这个属性存在的原因在于 watch 有一个特点：当一个值第一次被绑定时，是不会执行监听函数( watch )的，只有当值发生了改变才回去执行。
当我们需要在最初绑定值的时候，就对该值执行监听，那就用到了这个属性。

watch: {
  name: {
    handler(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
    immediate: true
  }

【3】deep 属性
当需要监听一个对象的改变时，以上的监听方式已经不能满足，原因是受到 JavaScript 的限制(以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除，导致我们对一个对象的监听是无效的。
此时，我们需要使用 deep 属性对对象进行深度监听。

watch: {
  obj: {
    handler(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
    deep: true
  }
}

[注意] deep 的默认值是 false，为什么？因为使用了 deep 之后，监听器就会一层层的往下遍历，这样做可想而知对性能的开销非常的大，当我们只需要对一个对象里的某个属性进行监听时，可以使用字符串形式监听。

watch: {
  'obj.name': {
    handler(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
    deep: true
  }
}

8.data ：

用于定义组件的数据。这个方法返回一个对象，这个对象包含了组件的数据属性和对应的值。在 Vue.js 中，数据驱动视图，因此 data 方法是非常重要的。

9.return

，通过在data函数中返回一个对象来设置组件的初始状态。此外，我们还可以在组件的methods中定义函数并使用return语句来返回需要使用的值。

需要注意的是，在Vue组件中使用return语句时，我们需要将组件的数据和方法统一返回给Vue实例。

export default {
  data() {
    return {
      message: "Hello World"
    };
  },
  methods: {
    showText() {
      return "Hello World";
    },
    showText2() {
      const name = "Tom";
      return `Hello ${name}`;
    }
  }
};