Vue 2 生命周期与数据绑定代码风格示例

Vue 2 生命周期钩子

export default {
  // 初始化阶段
  beforeCreate() {
    console.log('beforeCreate: 实例初始化之后，数据观测和事件配置之前');
  },
  
  created() {
    console.log('created: 实例创建完成，已完成数据观测，但尚未挂载DOM');
    // 可在此处发起异步请求
  },
  
  // 挂载阶段
  beforeMount() {
    console.log('beforeMount: 挂载开始之前被调用');
  },
  
  mounted() {
    console.log('mounted: 实例已挂载到DOM上');
    // 可在此处操作DOM或初始化第三方库
  },
  
  // 更新阶段
  beforeUpdate() {
    console.log('beforeUpdate: 数据更新时调用，发生在虚拟DOM重新渲染之前');
  },
  
  updated() {
    console.log('updated: 数据更改导致的虚拟DOM重新渲染完成');
    // 避免在此处修改状态，可能导致无限循环
  },
  
  // 销毁阶段
  beforeDestroy() {
    console.log('beforeDestroy: 实例销毁之前调用');
    // 可在此处清除定时器、取消事件监听等
  },
  
  destroyed() {
    console.log('destroyed: 实例销毁后调用');
  },
  
  // 仅用于keep-alive缓存的组件
  activated() {
    console.log('activated: 被keep-alive缓存的组件激活时调用');
  },
  
  deactivated() {
    console.log('deactivated: 被keep-alive缓存的组件停用时调用');
  }
}

数据绑定示例

1. 插值表达式

<template>
  <div>
    <p>Message: {{ message }}</p>
    <p>Reversed message: {{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

2. 指令绑定

<template>
  <div>
    <!-- v-bind 绑定属性 -->
    <a :href="url" :title="tooltip">Vue官网</a>
    
    <!-- v-model 双向绑定 -->
    <input v-model="inputText" placeholder="输入内容">
    <p>输入的内容: {{ inputText }}</p>
    
    <!-- v-if/v-show 条件渲染 -->
    <p v-if="showMessage">这段文字会根据条件显示</p>
    <p v-show="showMessage">这段文字总是会被渲染，只是display属性变化</p>
    
    <!-- v-for 列表渲染 -->
    <ul>
      <li v-for="(item, index) in items" :key="item.id">
        {{ index }} - {{ item.text }}
      </li>
    </ul>
    
    <!-- v-on 事件绑定 -->
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://vuejs.org',
      tooltip: '前往Vue官网',
      inputText: '',
      showMessage: true,
      items: [
        { id: 1, text: '项目1' },
        { id: 2, text: '项目2' },
        { id: 3, text: '项目3' }
      ]
    }
  },
  methods: {
    handleClick() {
      alert('按钮被点击了!')
    }
  }
}
</script>

3. 计算属性和侦听器

<template>
  <div>
    <p>全名: {{ fullName }}</p>
    <input v-model="firstName" placeholder="名">
    <input v-model="lastName" placeholder="姓">
    
    <p>问题: {{ question }}</p>
    <p>答案: {{ answer }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '张',
      lastName: '三',
      question: '',
      answer: '请先提出问题'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  watch: {
    // 监听question变化
    question(newVal) {
      if (newVal.includes('?')) {
        this.getAnswer()
      }
    }
  },
  methods: {
    getAnswer() {
      // 模拟异步获取答案
      setTimeout(() => {
        this.answer = '这是对"' + this.question + '"的回答'
      }, 1000)
    }
  }
}
</script>

代码风格建议

1. 组件命名：使用PascalCase（大驼峰式命名）

   export default {
     name: 'MyComponent'
   }

2. 属性顺序：建议按照以下顺序组织组件选项

   export default {
     name: 'ExampleComponent',
     components: {},
     props: {},
     data() {},
     computed: {},
     watch: {},
     // 生命周期钩子按调用顺序排列
     beforeCreate() {},
     created() {},
     beforeMount() {},
     mounted() {},
     beforeUpdate() {},
     updated() {},
     beforeDestroy() {},
     destroyed() {},
     methods: {}
   }

3. v-for始终使用key：提高渲染性能

   <li v-for="item in items" :key="item.id">

4. 避免v-if和v-for一起使用：如果需要，使用计算属性过滤列表

5. 自定义事件命名：使用kebab-case（短横线分隔命名）

   this.$emit('my-event')

6. 组件/实例选项中的空行：在逻辑块之间添加空行提高可读性