关于vue3的一些前端面试题-EW帮帮网

1.ref()

响应式对象
顶级响应式对象，可以在模板中直接使用不用添加 .value,可以直接使用
ref() 对像更新，Vue会自动检测更新，然后更新Dom
深层次的对象也可以是响应式，也会被追踪
shallowRef() 是ref的浅层次表现，深层次的浅套不起作用
triggerRef() 强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。
toRef() 复制reactive()内的对象变成 ref
toRefs() 复制reactive()内的对象变成 ref`

  const obj = reactive({
    name: 'wangxuan',
    age: 18
  })

  const rName = toRef(obj, 'name')
  // rName.value = 'wangxuan'

  const rObj = toRefs(obj)
  // rObj.name.value = 'wangxuan'
  // rObj.age.value = 18

2.reactive()

reactive()本身具有响应式,不用添加 .value
深层次的对象也可以是响应式，也会被追踪
深层次的对象，如果只修改了内部属性，不会触发更新，需要使用 shallowReactive()，推出深层次
reactive()有局限性，所以推荐使用 ref()
- 只对对象、数组、Set、Map等具有深层次的响应，不能对 string、number、boolean等基本类型进行响应式
- 不能替换整个对象，整个替换会失去响应式
- 对解构操作不友好。要想结构出到本地对象还是响应式，可以用ref() 对象包裹,例子：
```
const state = reactive({
  count: 0
})
// 结构出来的count就失去了响应式
const { count } = state

// 需要这样
const state = reactive({
  count: ref(0)
})
// 结构出来的count是响应式
const { count } = state
```

3.computed

计算属性的返回值也是一个ref()对象，具有响应式。
计算属性会缓存，只有当依赖的响应式发生变化时才会重新计算。
计算属里 不要改变其他状态、在 getter 中做异步请求或者更改 DOM，这些操作可以在watch()中完成
计算属性最好只作为一个只读的属性，官方推荐。
想要更改计算属性的返回值，需要重新写计算属性的getter()、setter()方法，一下例子：

  const state = ref('已读')
  const state1 = ref('回复')
  // 更改计算属性的返回值
  const countRef = computed({
    get: () => {
      return state.value + ' ' + state1.value
    },
    set: (val) => {
      [state.value, state1.value] = val.split(' ')
    }
  })
  countRef.value = '已读 乱回'
  console.log(state.value) // 已读
  console.log(state1.value) // 乱回

4.watch

-浅层监听

  // 监听单个属性
  watch(state, (newVal, oldVal) => {
    console.log(newVal, oldVal)
  })
  // 监听多个属性,多个属性的监听，newValue是一个位置与监听源一致的数组
  watch([state, state1], (newVal, oldVal) => {
    console.log(newVal, oldVal)
  })
  // 监听reactive对象, satae对象的任意属性都会被监听
  // 监听响应式对象的单个属性值的时候需要用getter函数的形式监听
  watch(()=> state.value, (newVal, oldVal) => {
    console.log(newVal, oldVal)
  })
  // 监听整个响应式对象
  watch(state, (newVal, oldVal) => {
    console.log(newVal, oldVal)
  })
  // 监听getter函数,函数被调用就会执行
  watch(()=> sate.value + state1.value, (newVal, oldVal) => {
    console.log(newVal, oldVal)
  })

-深层监听添加{deep: true}属性，一般不使用渐层监听其实已经带了，添加{deep: true}会遍历整个监听对象，降低性能没有必要的时候避免使用
-{immediate:true}属性可以在创建监听起的时候就触发监听器
-{once:true}属性只监听一次
-{flush:'pre'}属性在DOM更新前执行监听器
-{flush:'post'}属性在DOM更新后执行监听器
-{flush:'sync'}属性在DOM更新前执行监听器

5.watchEffect

不需要指定监听源，在回调里被用到的响应式属性都会被监听
想要监听的对象，在回调中多个属性被用到都会触发监听
与watch的区别就在于不需要指定监听源，watchEffect会更高效，写法也会更简洁
在异步回调中使用监听器需要手动停止监听，返回一个停止函数，调用停止函数即可停止监听

const stop = watchEffect(() => {
  console.log(state.value)
})
stop() // 手动停止监听

6.组件传值

模版引用可以 <ChildComponent ref="childRef" />, childRef就是子组件的引用,可以访问自组件所有属性，子组件要通过defineExpose先暴露属性值
保持单项数据流
双向绑定，子组件使用defineModel()声明，父组件使用v-model绑定，子组件发生改变，父组件也会变化
父组件通过props属性传递数据给子组件

// 父组件 -> 子组件
<ChildComponent :name="name" :age="age" />
// 子组件接收
const props = defineProps({
  name: String,
  age: Number,
  text: String,
  // 参数校验，必填与默认值
  text1: {
    type: String,
    default: 'hello',
    required: true
  }
})

// 子组件 -> 父组件
const emit = defineEmits({
  'change': null,
  // 事件校验
  'click': ()=> {
    return true
  }
  })
emit('change', 'hello')

// 子组件 -> 父组件
const emit = defineEmits(['change'])
emit('change', {
  name: 'hello',
  age: 18
})

7.provide/inject

父组件通过provide传递数据，子组件通过inject接收数据
子组件可以接收父组件传递的数据，也可以接收祖先组件传递的数据
保证数据流是单向的，也可以提供更改父组件数据的方法，在子组件中调用

// 父组件
const state = reactive({
  name: 'hello',
  age: 18
})
provide('state', state)

// 子组件
const state = inject('state')

8.v-if vs v-for

v-if 优先级更高，如果同时使用，v-if先执行
不推荐同时使用

9.v-for 也可以使用 of替代in这样写更接近js的迭代器的语法

作为开发者，我们需要保持好奇心和学习热情，不断探索新的技术，只有这样，我们才能在这个快速发展的时代中立于不败之地。介绍一款程序员都应该知道的软件JNPF快速开发平台，很多人都尝试用过它，它是功能的集大成者，任何信息化系统都可以基于它开发出来。

JNPF可以实现应用从创建、配置、开发、测试到发布、运维、升级等完整生命周期的管理。减少了传统应用程序的代码编写量，通过图形化、可视化的界面，以拖放组件的方式，即可快速生成应用程序的产品，大幅降低了开发企业管理类软件的难度。

当然，我更建议大家成为一个全栈，不要把自己的定位局限于前端。

感谢阅读本文

如果有什么建议，请在评论中让我知道。我很乐意改进。

关于vue3的一些前端面试题

网站公告

今日签到

热门文章

最新发布