Vue面试解析(2)

这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战

vue.js的核心特性

• 数据驱动视图(MVVM)
• 组件化开发:将整个网页拆分成一个个区块，每个区块可以看作是一个组件。
  • 不仅可以封装结构还可以封装样式与逻辑代码
  • 大大提高了开发效率与可维护性
  • 复用时写自定义标签即可
• 指令：v-
  • 本质是：自定义HTML属性
  • 作用：不直接操作DOM对元素设置功能

常用的指令

渲染指令

• v-for:循环遍历渲染结构
• v-if:根据条件控制元素的创建与移除
• v-show:控制元素的显示与隐藏，适合：频繁切换时使用

属性绑定

• v-bind:用于动态绑定HTML元素属性

文本

• v-text:替换为纯文本数据
• v-html:替换为指定的HTML文本

vue.js的生命周期

创建阶段（只执行1次）

• beforecreated: 实例初始化之前
• created：实例创建后调用，数据绑定、方法设置完毕，可以进行数据请求相关操作
• beforemounted：实例挂载到页面之前调用的函数
• mounted：实力挂载完毕。可进行DOM操作，例：ref获取数据

运行阶段（次数不定，按需执行）

• beforeupdated:数据更新后，视图更新前调用
• updated：视图更新后调用

销毁阶段（只执行1次）

• beforedestory: 实例销毁之前
• destory：实例销毁之后调用，数据、方法、事件等均被移除

嵌套组件的生命周期如何执行？

• 父beforecreated
• 父created
• 父beforemounted
  • 子 beforecreated
  • 子 created
  • 子 beforemounted
  • 子 mounted
• 父 mounted

vue路由传参的两种方式

• params: name引入
  • 接收参数this.$route.query.name
  • url展示：类似于POST,传值相对安全点
  • 刷新页面就不在了
• query：path引入
  • 接收参数this.$route.params.name
  • url展示：类似于GET，通过url传参
  • 刷新页面还在