Vue3、Vue2

<template>
  <div>
    <h2>计数器: {{ count }}</h2>
    <p>双倍值: {{ doubleCount }}</p>
    <button @click="increment">+1</button>

    <input v-model="search" placeholder="搜索用户" />
    <ul>
      <li v-for="user in filteredUsers" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0,
        search: '',
        users: [
          { id: 1, name: 'Alice' },
          { id: 2, name: 'Bob' },
          { id: 3, name: 'Charlie' }
        ]
      }
    },
    methods: {
      increment() {
        this.count++
      }
    },
    computed: {
      doubleCount() {
        return this.count * 2
      },
      filteredUsers() {
        return this.users.filter(u =>
            u.name.toLowerCase().includes(this.search.toLowerCase())
        )
      }
    },
    watch: {
      count(newVal) {
        console.log('count changed:', newVal)
      }
    }
  }
</script> 

<!-- Vue 3 - 标准 setup -->
<template>
  <div>
    <h2>计数器: {{ count }}</h2>
    <p>双倍值: {{ doubleCount }}</p>
    <button @click="increment">+1</button>

    <input v-model="search" placeholder="搜索用户" />
    <ul>
      <li v-for="user in filteredUsers" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue'

export default {
  setup() {
    // 计数逻辑
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    const increment = () => {
      count.value++
    }

    // 搜索逻辑
    const search = ref('')
    const users = ref([
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
      { id: 3, name: 'Charlie' }
    ])
    const filteredUsers = computed(() => {
      return users.value.filter(u =>
        u.name.toLowerCase().includes(search.value.toLowerCase())
      )
    })

    // 监听
    watch(count, (newVal) => {
      console.log('count changed:', newVal)
    })

    // 返回给模板使用的变量和方法
    return {
      count,
      doubleCount,
      increment,
      search,
      filteredUsers
    }
  }
}
</script>

<!-- Vue 3 - 使用 <script setup>（顶级语法糖） -->
<script setup>
import { ref, computed, watch } from 'vue'

// 计数逻辑
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
const increment = () => count.value++

// 搜索逻辑
const search = ref('')
const users = ref([
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
])
const filteredUsers = computed(() => {
  return users.value.filter(u =>
    u.name.toLowerCase().includes(search.value.toLowerCase())
  )
})

// 监听
watch(count, (newVal) => {
  console.log('count changed:', newVal)
})
</script>

<template>
  <div>
    <h2>计数器: {{ count }}</h2>
    <p>双倍值: {{ doubleCount }}</p>
    <button @click="increment">+1</button>

    <input v-model="search" placeholder="搜索用户" />
    <ul>
      <li v-for="user in filteredUsers" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

<!-- Vue 2 -->
<template>
  <div id="app">
    <h2 v-if="show">当前计数：{{ count }}</h2>
    <button @click="count++">+1</button>
    <button @click="show = false">销毁组件</button>
  </div>
</template>

<script>
export default {
  name: 'App',

  data() {
    return {
      count: 0,
      show: true,
      timer: null
    }
  },

  beforeCreate() {
    console.log(' beforeCreate: 实例还未初始化')
    // 此时 this.$el 不存在，data 未代理
  },

  created() {
    console.log('created: 实例创建完成', this.count)
    // 可以发起网络请求
    this.timer = setInterval(() => {
      console.log('定时器运行中...')
    }, 1000)
  },

  beforeMount() {
    console.log(' beforeMount: 模板编译完成，DOM 未挂载')
  },

  mounted() {
    console.log(' mounted: 组件已挂载到页面', this.$el)
    // 可操作 DOM
  },

  beforeUpdate() {
    console.log(' beforeUpdate: 数据变化，视图更新前')
  },

  updated() {
    console.log(' updated: 视图已更新')
  },

  beforeDestroy() {
    console.log(' beforeDestroy: 组件即将销毁')
    // 必须手动清除副作用
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },

  destroyed() {
    console.log('destroyed: 组件已完全销毁')
  }
}
</script> 

<!-- Vue 3 - 使用 <script setup> -->
<script setup>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

const count = ref(0)
const show = ref(true)
let timer = null

// 模拟副作用：定时器
timer = setInterval(() => {
  console.log('[Timer] 运行中...')
}, 1000)

// === 生命周期钩子 ===

console.log(' setup: 组件开始初始化')

onBeforeMount(() => {
  console.log(' onBeforeMount: 即将挂载')
})

onMounted(() => {
  console.log('onMounted: 组件已挂载', document.getElementById('app'))
})

onBeforeUpdate(() => {
  console.log(' onBeforeUpdate: 视图更新前')
})

onUpdated(() => {
  console.log(' onUpdated: 视图已更新')
})

onBeforeUnmount(() => {
  console.log(' onBeforeUnmount: 组件即将卸载')
  // 清理副作用
  if (timer) {
    clearInterval(timer)
    timer = null
    console.log(' 定时器已清除')
  }
})

onUnmounted(() => {
  console.log(' onUnmounted: 组件已完全卸载')
})
</script>

<template>
  <div id="app">
    <h2 v-if="show">当前计数：{{ count }}</h2>
    <button @click="count++">+1</button>
    <button @click="show = false">销毁组件</button>
  </div>
</template>