vue

Vue核心特性速览：高效开发与性能优化 Vue的vif和v-show是条件渲染的利器：vif惰性销毁/重建DOM，适合低频切换vshow通过CSS切换显示，适合高频操作路由系统支持动态、嵌套、编程式导航及守卫控制，keepalive可缓存组件状态组件是Vue的核心，通过插槽、通信（props/emit）和计算属性实现复用ES6语法简化代码，生命周期钩子精准控制流程v-show初始渲染成本高但切换快，vif反之路由配置需注意导出规范：对象首字母大写，函数首字母小写。

vue

• 基础
  • 生命周期
    • beforeCreate
      • 初始化实例前，data、methods等不可获取
    • created
      • 实例初始化完成，此时可获取data里数据和methods事件，无法获取 DOM
    • beforeMount
      • 虚拟 DOM 创建完成，此时未挂载到页面中，vm.$el可获取未挂载模板
    • mounted
      • 数据绑定完成，真实 DOM 已挂载到页面，vm.$el可获取真实 DOM
    • beforeUpdate
      • 数据更新，DOM Diff 得到差异，未更新到页面
    • updated
      • 数据更新，页面也已更新
    • beforeDestroy
      • 实例销毁前
    • destroyed
      • 实例销毁完成
    • 使用场景
      • 适合发起异步请求获取数据
      • 适合操作DOM或初始化第三方库
      • 事件监听
      • 定时器管理
    • 父子组件生命周期执行顺序
    • 特殊生命周期钩子
      • activated
      • deactivated
      • 用于 <keep-alive> 缓存的组件
      • errorCaptured
        • 捕获子孙组件的错误
  • 模板语法
    • 文本插值 “{{XXX}}”
      • <span>Message: {{ msg }}</span>
        • 双大括号会被替换成相应组件中的msg值，msg每次更新，也会随之更新
      • 双大括号会被解释为纯文本，如果想要显示html，则需要加v-html
        • <p>Using v-html directive: <span v-html="rawHtml"></span></p>
      • • 显示
  • 指令
    • 指令以“v-”作为前缀，是vue提供的特殊属性
      • v-xxx可以简写成“:xxx”
    • v-bnd 简写 :bind
      • v-bind 指令指示 Vue 将元素的属性与组件的 dynamicId 属性保持一致
      • <div v-bind:id="dynamicId"></div>
        • id等于dynamicId的值
      • v-bind如果绑定的是布尔类型的属性时，表示该元素是否拥有属性
      • 通过不带参数的 v-bind，可以将多个属性绑定到一个元素上
    • v-show
      • 用于根据条件控制元素的显示与隐藏
    • v-once
      • 一次性插值，数据改变时插值处的内容不会更新
    • v-if，v-else-if, v-else
      • 用于根据条件决定是否渲染 DOM 元素
    • v-if 与 v-show 的区别
      • 渲染机制
        • v-if 是"真正的"条件渲染，元素会被销毁和重建
        • v-show 只是简单的 CSS 显示/隐藏切换
      • 初始渲染
        • v-if 是惰性的，初始条件为 false 时不渲染
        • v-show 无论初始条件如何都会渲染
      • 切换开销
        • v-if 切换时有更高的性能开销（需要销毁/重建 DOM）
        • v-show 切换时性能更好（只是修改 CSS 属性）
      • 编译
        • v-if 有更高的切换开销
        • v-show 有更高的初始渲染开销
    • v-for
      • 可以用来遍历数组，字符串，对象，数字等，结合in来使用
        • 遍历对象
    • v-model
      • 用于表单上元素的双向绑定数据
        • 单选
        • 复选框
      • 修饰符，针对input
        • lazy
          • 使用lazy修饰后，绑定的数据不会马上改变，而是要失去焦点或回车后才会变化
        • number
          • 将输入转换成数字
        • trim
          • 自动过滤输入的首位中的空格
    • 自定义指令
      • 局部注册
        • • 组件内部
      • 全局注册
        • • 在main.js中
      • 钩子函数
        • bind
          • 只调用一次，指令第一次绑定到元素时调用
        • inserted
          • 被绑定元素插入父节点时调用
        • update
          • 所在组件的 VNode 更新时调用
        • componentUpdated
          • 所在组件及子组件的 VNode 全部更新后调用
        • unbind
          • 只调用一次，指令与元素解绑时调用
        • 钩子函数参数
          • el
            • 包含以下属性的对象
          • binding
            • name
              • 指令名（不包括 v- 前缀）
            • value
              • 指令的绑定值
            • oldValue
              • 指令绑定的前一个值（仅在 update 和 componentUpdated 中可用）
            • expression
              • 字符串形式的指令表达式
            • arg
              • 传给指令的参数（如 v-my-directive:foo 中的 foo）
            • modifiers
              • 包含修饰符的对象（如 v-my-directive.foo.bar 中的 { foo: true, bar: true }）
          • vnode
            • Vue 编译生成的虚拟节点
            • oldVnode
              • 上一个虚拟节点（仅在 update 和 componentUpdated 中可用）
  • 计算属性
    • computed
      • 计算属性默认会提供getter和setter方法
      • 计算属性，方法名就是一个变量
    • 计算属性和method的区别
      • 计算属性所依赖的属性数据发生变化时，他才会变化，所以只要依赖的属性不发生变化，计算属性就不会变
      • method只要重新渲染，就会被调用，因此函数也会被执行
      • 如果需要缓存，就选计算属性
      • 比如遍历大数组或做大量计算时，应该使用计算属性
  • 侦听器
    • watch
      • 监听数据的变化
        • 监视函数有两个参数，第一个参数是新值，第二个参数是原来的值
      • 监视对象
        • 监听对象时，只有，整个对象都发生了变化才能监听到，如果只是变化对象的一个属性，无法监听到
        • 如果监听某个对象的属性变化时，需要开启深度监听，否则无法发现对象变化
          • 开启深度监视
          • 或者显示的写出监视对象的属性
        • immediate
          • 为true时，监听在初始化时，立即执行一次
        • unwatch()
          • 用于停止监听
• 组件
  • 组件本质上是一个拥有预定义选项的 Vue 实例
  • 特性
    • 独立性
      • 每个组件都是独立的，拥有自己的作用域
    • 可复用性
      • 可以多次使用同一个组件
    • 组合性
      • 可以嵌套使用形成组件树
    • 封装性
      • 将相关的 HTML、CSS 和 JavaScript 封装在一起
  • 组件通信
    • 父到子
      • 通过 props
        • 如果子组件需要修改父组件传过来的值，可以在data里面单独定义一个变量来修改
    • 子到父
      • 通过 $emit 触发事件
    • 兄弟之间
      • 通过共同的父组件，或使用 Vuex/Pinia 状态管理
        • 通过相同的父组件
          • 1.子组件 A 通过 $emit 触发事件通知父组件 2.父组件监听事件并更新数据 3.父组件通过 props 将数据传递给子组件 B
        • Vuex
          • State
            • 存储应用状态（数据）
          • Getters
            • 类似于计算属性，用于派生状态
          • Mutations
            • 唯一可以修改 State 的方法，必须是同步事务
          • Actions
            • 类似 Mutation，但可以包含异步操作，提交 Mutation 来改变 State
          • Modules
            • 将 Store 分割成模块化，每个模块拥有自己的 State、Getter、Mutation 和 Action
          • 例子
      • 通过事件总线方式
        • 事件总线类似通过共同的父组件通信，事件总线相当于创建一个新的vue组件，需要相互通信的两个组件共同引入事件总线js，将事件绑定到事件总线上即可
    • 深层嵌套
      • 使用 provide/inject
  • slot：插槽
    • 插槽是放在子组件上，选择的显示父组件的内容，如果父组件中没有内容，则默认显示插槽中的内容，否则显示父组件内容
    • 具名插槽
      • 简单来说就是给插槽取个名字，如果要将某个内容插入子组件的对应位置，父组件相关标签上就可以写插槽的名字，则内容就会被插入对应的位置，如果未指定插槽位置，则自动加入到未指定位置的插槽位置
    • 访问插槽
      • this.$slots.插槽名称
        • 可以拿到对应插槽对象
      • this.$slots.default
        • 可以获取所有没有具名插槽的内容
• 路由
  • npm install vue-router@版本
    • 安装组件
  • 在src下创建一个router文件夹
    • 里面存放的index.js就是路由的核心配置
      • component
        • 导航对应的组件
      • path
        • 导航的路径
      • name
        • name就是给路由起个名字，也叫命名路由
          • 命名路由就是用一个名称来标识一个路由，在定义路由的时候设置一个name属性即可。在router-link中也可以用路由的名字来链接到一个路由。
        • 那么也可以用来传递参数（不推荐）
      • 路由懒加载
        • 不用事先导入组件，在配置路由时再导入组件
  • main.js中引入路由
  • 路由导航
    • 使用标签router-link
      • 属性to
        • 路由跳转的路径
      • 用于导航的组件，相当于 <a> 标签
    • 路由视图router-view
      • 路由匹配的组件渲染位置
      • 配合router-link使用，展示导航的页面展示的内容，只有写了router-view，导航的内容才能展示出来
      • 命名视图
        • 同时 (同级) 展示多个视图，而不是嵌套展示
        • 如果 router-view 没有设置名字，那么默认为 default
          • 展示所有
  • 嵌套路由
    • 即路由中还有子路由
  • 动态路由
  • 编程式路由
    • 编程式导航通过JavaScript代码实现，通常用于需要在特定条件下进行跳转的场景
    • 所谓编程式导航就是用router.push()替换<router-link :to="...">
  • 路由的重定向
    • 重定向：redirect
    • 将一个路径重定向到另一个路径
    • 例如，客户访问网页时，如果检查到客户未登录，我们将客户导航到登录界面，如果登录成功，重定向到首页
  • 路由传参
    • 动态路由就是利用url来传参的做法
      • 冒号的形式传递参数
    • 用那么传参（不推荐）
      • 用$router.name就可以取到
  • 路由守卫
    • 路由守卫允许你在导航发生前、发生时和发生后执行自定义逻辑
    • 全局前置守卫
      • beforeEach(to,from)
        • 全局前置守卫
          • to 即将要进入的目标
          • from 当前导航正要离开的路由
        • 例如检测到客户未登录，则重定向到登录页面
    • 路由独享守卫
      • beforeEnter
      • 配置在路由内部，路由自己独有的守卫
    • 组件内守卫
      • 路由组件内直接定义路由导航守卫(传递给路由配置的)
        • beforeRouteEnter
          • 在渲染该组件的对应路由被验证前调用
          • 不能使用this
          • 组件还未被创建
        • beforeRouteUpdate
          • 在当前路由改变，该组件被复用时调用，即第该组件第二次被调用时
            • 常用的是通过url传参的路由类型
          • 可以使用this
        • beforeRouteLeave
          • 导航离开渲染该组件的对应路由时调用
          • 可以使用this
    • 全局后置钩子
      • 对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。
      • afterEach
    • 路由解析过程
      • 1. 导航被触发
      • 2. 在失活的组件里调用beforeRouteLeave守卫
      • 3. 调用全局的 beforeEach 守卫
      • 4. 在重复调用的组件里调用 beforeRouteUpdate 守卫
      • 5. 在路由配置里调用 beforeEnter
      • 6. 解析异步路由组件
      • 7. 在被激活的组件里调用 beforeRouteEnter
      • 8. 调用全局的 beforeResolve 守卫
      • 9. 导航被确认
      • 10. 调用全局的 afterEach 钩子
      • 11. 触发 DOM 更新
      • 12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入
• ES6语法
  • 模块
    • 如果模块只有一个输出值，就使用export default
    • 如果模块有多个输出值，就不使用export default
    • export default与普通的export不要同时使用
    • 如果模块默认输出一个函数，函数名的首字母应该小写。
    • 如果模块默认输出一个对象，对象名的首字母应该大写
• vuex
  • 在大型 Vue 应用中，多个组件之间可能需要共享数据或状态。如果没有一个统一的管理机制，数据传递将会变得复杂且难以维护
  • State: 存储应用状态（数据）。
  • Getter: 类似于计算属性，用于派生状态。
  • Mutation: 唯一可以修改 State 的方法，必须是同步事务。
  • Action: 类似 Mutation，但可以包含异步操作，提交 Mutation 来改变 State。
  • Module: 将 Store 分割成模块化，每个模块拥有自己的 State、Getter、Mutation 和 Action。
  • 例子
  • State
    • 访问 State1
      • 方法1
      • 方法2
  • Getter
    • 使用 Getter
      • 方法1
      • 发放2
  • Mutation
    • 定义 Mutation
    • 提交 Mutation
      • this.$store.commit('increment', { amount: 10 })
    • 使用
  • Action
    • Actions 类似 Mutations，但它们可以包含任意异步操作，并且可以通过提交 Mutation 来改变 State
    • 定义 Action
    • 调用 Action
      • 方法1
        • this.$store.dispatch('incrementAsync')
      • 方法2
  • Module
    • 当应用规模较大时，可以将 Store 分割为多个模块，每个模块都有自己的 State、Mutation、Action 和 Getter。
    • 访问模块内的数据
      • this.$store.state.a.name