Vue.js 基础与实战指南：从入门到跑路

一、Vue的两种使用方式扩展

1. 核心包开发

   • 直接通过<script>引入Vue.js，适用于简单页面或局部功能增强。

   • 优点：轻量，无需构建工具。

   • 缺点：难以管理复杂项目，缺少工程化支持。

2. 工程化开发

   • 使用Vue CLI、Vite等工具创建项目，结合Webpack/Vite构建。

   • 支持单文件组件（.vue文件），结构清晰（`, ,）。

   • 插件生态丰富（如Vue Router、Vuex、Pinia）。

---

二、Vue实例的深入理解

1. 核心配置项

    new Vue({
      el: '#app',          // 指定挂载的DOM元素
      data: { ... },       // 数据对象（响应式）
      methods: { ... },    // 定义方法
      computed: { ... },   // 计算属性（缓存结果）
      watch: { ... },      // 侦听数据变化
      created() { ... },   // 生命周期钩子（实例创建后）
    })

2. 生命周期钩子

   • 重要阶段：created（数据初始化）、mounted（DOM挂载完成）、updated（数据更新）、destroyed（实例销毁）。

---

三、插值表达式补充

1. 支持的内容

   • 变量、表达式、方法调用、计算属性。

    <p>{{ reversedMessage() }}</p>  <!-- 调用方法 -->
    <p>{{ fullName }}</p>            <!-- 计算属性 -->

2. 与指令的区别

   • 插值表达式仅用于文本内容，动态属性需用v-bind：

    <div v-bind:class="className">{{ text }}</div>

---

四、响应式原理深入

1. 底层实现

   • Vue 2 使用Object.defineProperty监听数据变化，Vue 3 改用Proxy。

   • 数组变更需使用变异方法（如push, splice），或通过Vue.set()更新。

2. 数据更新注意事项

   • 直接修改数组索引或对象属性不会触发视图更新，需使用Vue.set()（Vue 2）或响应式API（Vue 3）。

---

五、Vue指令扩展

指令	说明	示例
v-bind	动态绑定属性，可简写为 :	:href="url"
v-on	绑定事件，可简写为 @	@click="handleClick"
v-for	循环渲染，必须加 :key	v-for="(item, index) in list"
v-model	表单双向绑定，修饰符：.lazy（输入完成后更新）、.trim（去空格）	v-model.trim="inputText"
v-if vs v-show	v-if：条件渲染（销毁元素）；v-show：切换CSS display属性

---

六、开发者工具技巧

• 安装Vue Devtools浏览器插件，可实时查看组件树、数据状态、事件触发。

• 支持直接修改数据调试响应式变化。

---

建议结合官方文档和实战项目巩固知识！