Intact

Appearance

面经 ​

Vue2和Vue3的区别

Vue3

  • Composition API
  • Proxy
  • Tree Shaking
  • Ts

vue2

  • 生态稳定 && 经历检验

什么情况下用vuex比较好？什么时候用Pinia比较好？ -> vuex和pinia的对比？

vuex

  • 重量级
  • 集中式管理

pinia

  • 轻量化
  • 模块式管理
  • Ts

v-for为什么要加key，不加key页面渲染会出现错误吗

用于VDOM和Diff中识别其最终渲染的DOM唯一性

命令 ​

  • data(){}

    • 在export default里使用外界的方法或者函数必须要在data里挂载注册

  • methods:{}

    • 复杂逻辑时使用方法
    • 人为传递事件对象----$event传到参数里

  • mounted(){}

    • 生命周期函数

  • watch{}

    • watch下的方法参数 第一个为新的值，第二个为旧的值。
      • 只设置一个时，默认为新值

  • Vue.createApp({})

    • ~.component({})
    • mount 挂载

  • v-for=""

    • in循环和of循环
    • 可遍历数字
    • 可遍历对象
    • value key index 属性值 属性名 索引值

  • v-text =={

    • 动态计算

  • v-html 对代码进行原样解析

  • 子组件修改数据影响父组件：

    • v-model:value

      • 简写：v-model=“”

    • 子组件中需要有的元素：props(传递父子组件间的数据)，$emit自定义事件

  • 数据绑定：v-bind

    • 使用后属性为表达式，不为原始值
    • 简写：:id
    • 属性动态计算： :[xxx]=""

  • v-show 是否显示内容

  • v-once 只渲染一次i

  • v-on:

    • 可以一次使用多个方法
    • 简写： @
    • click=""

  • 阻止默认行为

    • event.preventDefault()

  • 修饰符：

    • .xxx
    • 例如：@click.prevent
    • $event 在前台中传递参数，把event传递进去、

  • v-if & v-show

    • 切换/交互频率高 使用 v-show : v-if
    • v-show 不可使用template和v-else
    • 条件判断

  • $attr.xxx

  • 取消渲染 template标签

  • 事件修饰符

    • 鼠标事件

      • capture 捕获：从捕获阶段输出
      • stop：阻止冒泡
      • self: 捕获的最底层执行
      • once:只执行一次
      • prevent:阻止默认行为
      • ★passive：跳过js对默认行为阻止判断的逻辑代码，在滚动这种高频事件中使用可以提高性能意思是：我不阻止默认行为，不需要判断。即后续如果写阻止默认行为的代码会失效
      • 特殊按键
        • left 按鼠标左键
        • right 按鼠标右键
        • enter 提交异步发送数据

    • 键盘事件

      • 绝大多数情况下结合表单使用
      • @keyup.<某个字母> 表示只有按<某个字母>时才触发
      • 组合键定义 keyup.xxx.xxx 表示组合按键才触发
      • control在组合定义里必须写成ctrl

    • 键盘+鼠标事件

      • @click.alt
      • input的name一般不用
      • 使用.exact修饰符，表示只按当前设置的键触发，对设置的键包容的按键不触发

表单 ​

  • 文本域textarea 和input发生变化时，使用v-mdel双向绑定，就是在修改data里的数据。

  • v-model，双向绑定input输入数据

    • ★.lazy unfocus时发送同步数据
    • ★本身具有性能消耗，每次都同步会对异步请求影响

  • 通过input本身的状态可以对data中的布尔值进行改变

  • true-value&false-value 对icheckbox的true和false定制其返回值（在复选的时候，为其设置值可以根据是否选中给数组中添加和删除可选的元素，否则的话，默认值为“on”）

  • 格式：

    label 循环数据 =》 input使用数据

  • input:r快速建立单选框

    • 单选特点：当value为当前设定的值时，选中后无法返回，默认为'on'所以设置多个单选时，value都为'on'无法实现真正的单选
    • 通过设置vlaue = 0 或 1 等数字进行单选
    • value="" 填入的数据，在darta里是字符串，使用数据绑定后，:value=""填入的数据就是数字
    • select下拉列表
      • multiple属性
      • option设置选项
        • 设置value值，可以设置为对象。设置multiple的时候绑定的数据必须为数组

  • 表单中的内容为字符串，输入的数字为'12222467'类似

  • 修饰符

    • v-model.lazy 鼠标unfocus时触发
    • v-model.number 将数据作为数字而非字符串同步更新
    • v-model.trim 去除左右两边的空格 //空格在input中占长度 提交到后台时空格也会存在里边

template覆盖 ​

template在使用数据时会产生覆盖

花括号内写js表达式 ​

Vue对容器本身不做修改，容器只是个容器，是对容器的下属进行修改

计算属性 ​

单独提取出来

  • 使用方式与data的属性是一样的，都可以使用和v-text

  • 只有当使用响应式数据时，才会发生变化

  • 动态进行计算，主要根据vue里的data。动态计算数据

  • 计算属性等同于一个动态的data数据

监听器 ​

  • 当某个数据发生变化时，后续进行的一系列操作

  • 监听器的对象就是data里定义的数据

不使用vite构建工具 ​

Vue.createApp({

}).mount()

组件声明和使用vm.component({component_name,methods})

命名方式的不同 ​

html解析会自动转为小写

当文件名出现大写字母时，不使用vite/webpack情况下，其名称例如：

hdXj 需要写为:hd-xj。只有在vite/webpack中写hdXj才可运行