vue2语法this

Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面和单页应用程序。在Vue 2中，`this`关键字在组件的生命周期钩子、计算属性、方法和侦听器中扮演着重要角色。它指向当前组件的实例，允许开发者访问组件的数据、方法和计算属性等。

以下是一些`this`在Vue 2中的典型用法：

1. 数据和方法访问：在Vue实例中，`this`可以访问到定义在数据对象上的属性和方法。

   new Vue({
     data: {
       message: 'Hello Vue!'
     },
     methods: {
       greet() {
         console.log(this.message);
       }
     },
     created() {
       this.greet(); // 输出 "Hello Vue!"
     }
   });

2. 生命周期钩子：`this`在Vue的生命周期钩子函数中，可以用来执行一些初始化任务或清理工作。

   new Vue({
     // ...
     created() {
       // 在组件创建时执行一些操作
     },
     mounted() {
       // 组件挂载到DOM后执行的操作
     },
     // 其他生命周期钩子...
   });

3. 计算属性：在计算属性中，`this`可以访问组件实例的数据和其他计算属性。

   new Vue({
     data: {
       firstName: 'John',
       lastName: 'Doe'
     },
     computed: {
       fullName() {
         return this.firstName + ' ' + this.lastName; // 使用this访问数据属性
       }
     }
   });

4. 侦听器（Watchers）：在侦听器中，`this`可以用来访问组件实例的其他数据或方法。

   new Vue({
     data: {
       question: '',
       answer: 'I cannot give you an answer until you ask a question!'
     },
     watch: {
       // 当 question 发生变化时，执行此函数
       question(newQuestion, oldQuestion) {
         this.answer = 'Waiting for you to stop typing...'
         this.getAnswer();
       }
     },
     methods: {
       getAnswer() {
         if (this.question.indexOf('?') === -1) {
           this.answer = 'Questions usually contain a question mark. ;-)'
           return;
         }
         this.answer = 'Thinking...'
         // 异步请求获取答案
       }
     }
   });