第一点

Vue3的优势 和打包工具

vue3创建项目并初始化, 通过npm init vue@latest

vue创建实例化对象和v3的区别

vue的template没有根元素的限制, 且注册组件只需要引入便可直接使用, script添加setup可以使用组合式API

setup是Vue3的新生命周期, 会在beforeCreate之前执行,可以在其中定义数据和方法, 然后return

也可以将该属性加在scrpit标签上, 数据便可以直接在其中定义和使用, 且不用return

ref和reactive的使用和区别: 他们都需要引入, 都能将数据变为响应式的,区别在reactive只能传入一个对象,ref则可以传入简单数据内型和对象, 但在修改其值的时候, 需要加上.value属性,而 reactive可以进行直接修改, 传入对象时,ref内部依赖的是reactive

computed计算属性, 引入, 使用时传入一个回调函数, watch侦听器, 引入, 传入需要监听的值和一个回调,回调中会自动收集新的数据和旧的数据, ,watch的第三个参数可以传入一个配置对象, 以开启深度侦听和立即执行, 开启deep会进入递归从而造成性能损耗, 关闭deep并精确监听对象中某一个属性值时, 将第一个参数写为一个回调函数并return出对应属性, 计算属性的完整写法既传入一个对象,其中拥有个体和set两个函数

v3de生命周期函数

父子组件的传值, 子组件接收时使用编译器宏来接收,它无需引入,直接使用,如果有需要用到传递过来的值, 则需要同接收defineProps的返回值

子组件向父组件传值时, 需要用到defineEmit编译宏, 然后

ref的使用

使用ref注册一个元素, 并在标签上定义ref="元素", 父组件访问子组件的属性和方法需要通过defineExpose暴露出一个对象, 里面放子组件的属性和方法

顶层组件向底层组件

传递属性和方法, 通过provide函数和inject函数, provide传值需要传key和对应值, 在底层的inject通过key名来接收

router 的使用, 下载, 配置路由, 然后在main.js中引入

router页面跳转通过引入vue-router的useRoute和 useRouter进行跳转和取值, 也可以用router-link设置to属性进行跳转

Pinia 是 Vue.js 的轻量级状态管理库，是vuex的升级版, pinia的使用

npm i pinia 在main.js中use一下

引入defineStore并传入模块名, 回调函数, 第二个回调函数的写法如同setup的写法一般, 最后需要将定义的属性和方法全部return出去, 并导出该模块, 在其他页面可以直接调用导出的该方法, 他的getters被computed替代,如果在导入时, 想要进行解构(普通解构会失活),需要通过storeToRefs方法将通过回调拿到的对象作为参数,解构的数据便是响应式的

关于pinia的插件 pinia-plugin-persistedstate 官网

prazdevs.github.io/pinia-plugi…

1. 安装 npm i pinia-plugin-persistedstate
2. 配置

import { createPinia } from 'pinia'
// 引入持久化插件
import piniaPluginPersist from 'pinia-plugin-persistedstate'
const store = createPinia()
// 使用该插件
store.use(piniaPluginPersist)

app.use(store)

3. 使用

const useCounterStore = defineStore('counter', () => {
// 以对象形式返回
        return {count, addCount, doubleCount}
   },{
        persist: {
        key: 'my-custom-key' // 持久化使用的属性名,默认是 store.$id
        storage: sessionStorage, // 默认是localStorage
        paths: ['list', 'type'], // 要持久化的属性
     }
})

vue3中v-model和v2的区别, v3不支持.sync, 但是可以写多个v-model, 如果将v-model绑在组件上时, 相当于绑定

也可以使用

  // 通过指定属性名的方式 
  v-model:name ="123"
  @update:name

vueuse