跳转至
本文阅读量 次

1. 这里是 Vue 学习笔记

1.1 缩写指令

  • @ v-on 绑定事件
  • : v-bind 绑定属性
  • # v-slot 绑定插槽

1.2 app.config.globalProperties 如何使用

1.3 监听对象中某个属性的变化

<template>
  <div>
    <div>{{obj.name}}</div>
    <div>{{obj.age}}</div>
    <button @click="changeName">改变值</button>
  </div>
</template>

<script>
import { reactive, watch } from 'vue';
export default {
  setup(){
    const obj = reactive({
      name:'zs',
      age:14
    });
    const changeName = () => {
      obj.name = 'ls';
    };
    watch(() => obj.name,() => {
      console.log('监听的obj.name改变了')
    })
    return {
      obj,
      changeName,
    }
  }
}
</script>

watchEffect 会监听引用数据类型的所有属性，不需要具体到某个属性，一旦运行就会立即监听，组件卸载的时候会停止监听

1.1

名称 作用
app.provide() 提供一个可以在所有descendant组件使用的值
<KeepAlive> 缓存组件实例
watchEffect() 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。

为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()

toValue() 是 3.3 版本引入的新的 API, 和 unref 类似，但可以接受函数作为输入值

1.2 一个 Setup Context 主要包含什么

  • attrs
  • slots
  • emit
  • exposee

1.3 nextTick() 的作用是什么？

存在原因

Vue 当数据发生变化时，向 DOM 写入并不是变化时立即生效的，而是异步的。

主要是效率方面的考虑，使用这种机制可以将多次修改合并到一次 DOM 更新中，类似于显示原理中的帧缓存

nextTick() 的调用方式

  • 在 SFC 中直接调用
  • 在 Component 中通过 this.$nextTick() 调用

nextTick() 的参数及返回值

  • 如果入参传入一个 callback，则该 callback 会下一次变化真正生效时调用
  • 返回值是一个 Promise，且

可以配合 await nextTick() 进行调用

1.4 组合式API (Hooks / Composables)

无渲染组件或者轻量级组件？

为了实现带状态处理逻辑的复用

  • 一个 Composable 中可以嵌套其它的 Composable，以便组成更复杂的 Composable
  • 一个 Component / View/ Page 中可以引用多个 Composable，以组成更复杂的 Component / View/ Page
  • 官方的例子都是和 Lifecycle 事件关联的 onMounted / onUnmounted，相当于和引用方的触发点

参考

1.4.1 和 Mixin 的对比

1.4.2 和 无渲染组件的对比

1.4.3 和 React Hooks 的对比

1.5 国际化

1.6 ref() 和 reactive() 的区别有哪些

  • ref() 不仅可用于 object, 也可以用于 primitives 类型，如 boolean, int 等；reactive() 仅可用于 object
  • ref() 有一个 .value 属性，你必须使用 .value 属性获取内容(模板里可以自动 unwrap )，但是使用 reactive() 的话可以直接访问
  • 使用 ref() 函数可以替换整个对象实例，但是在使用 reactive() 函数时就不行

某种程度上， reactive() 可以看做是一个限制版的 ref()

参考

1.7 参考