Vue3.0笔记整理

yingwei-fe

已于 2022-10-20 16:03:30 修改

阅读量764

点赞数 3

分类专栏：前端文章标签：前端 javascript vue.js

于 2022-10-20 15:55:50 首次发布

本文链接：https://blog.csdn.net/weixin_42572626/article/details/127429019

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

vite

前端构建工具，最初是为了vue3.0项目一起使用，现在可以构建vue,react,preact框架

特点

快速冷启动
即时的模块热更新
真正的按需编译

vite和vue-cli的区别

 vue-cli在开发模式下必须对整个项目进行打包才能运行，vite在开发模式下则不需要打包，使用es6模块化加载规则，实现了真正的按需编译
vue-cli是基于webpack的热更新，而vite则是基于缓存的热更新

执行脚本

安装

npm i -g create-vite-app

创建项目

create-vite-app myproject

vue3.0

vue3.0亮点

1、 peformance： 性能更快，比vue2.0块1.2~2.0倍
2. Tree shaking support：按需编译，体积更小
3. Composition API: 组合式API
4. Better Ttypescript Support：更好的TS支持
5. Custom Render API：暴露了自定义渲染API
6. Fragment Teleport(Portal) Suppose: 更先进的组件

diff算法的优化

vue2.0中虚拟dom进行全量对比
vue3.0中新增了静态标记（PatchFlag）
- 在与上次的节点对比时候，只针对带有Patch flag的节点进行对比
- 可以通过flag的信息获取要对比节点的具体内容
- 静态标记的添加：创建虚拟DOM的时候，会根据节点中的内容是否会变化，添加静态标记

静态提升

默认情况下无论元素是否参与更新，每次都会重新创建一次，然后再重新渲染
vue3.0中针对不参与更新的元素会做静态提升，只创建一次，渲染时直接复用

事件侦听缓存

默认情况下中onClick因为是动态绑定事件，所以会追踪变化
vue3.0中因为事件绑定的是同一个函数，所以不再去追踪变化，直接缓存起来复用

双向数据绑定

在vue2.0中通过defineproperty实现数据的响应式处理
在vue3.0中通过ES6的Proxy实现数据的响应式，Proxy 是ES6中新增的一个特性，可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。
defineproperty只能劫持对象的属性，而proxy劫持的是整个对象

let obj = {a:1,b:2}
let state = new Proxy(obj,{
   get(obj,key){
       return obj[key]
   },
   set(obj,key,value){
       obj[key] = value
       return true
   }
})

SSR渲染

。。。。

组合式API

组合式api的含义

在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。
当构建前端应用时，我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间，我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑：它在接收一些输入后立刻返回所期望的输出。
组合式函数约定用驼峰命名法命名，并以“use”作为开头。

steup

steup是组合式api的入口
steup发生在组件创建执行之前，所以在steup中要避免使用this，这里获取不到data，method中的数据
steup选项是一个接收context，prop的函数，steup中返回的内容将暴漏给组件的其余选项（data,computed等）以及组件模板
1. prop参数
2. context参数
ref函数只能监听简单类型的变化
reactive函数可以监听负责数据类型的变化

// reactive函数可以监听复杂数据类型
import {reactive} from 'vue'
setup(){
    let state = reactive({
        arr: [1,2,3]
    })
    return {
        state
    }
}

ref

作用：一般用于定义基本数据类型数据，比如 String / Boolean / Number等。
背后：ref 的背后是使用 reactive 来实现的响应式.ref底层根据我们传递给ref的数据进行转换 ref（123）----> reactive({value:123})
语法：const x = ref(100)
访问：在 setup 中使用 .value 来访问。

    import { ref } from ‘vue’
    // 定义基本数据类型
    let num = ref(0);
    // 使用基本数据类型
    console.log(num.value)

isRef

作用：判断一个变量是否为一个 ref 对象。
语法：const bol = isRef(x)

unref

作用：用于返回一个值，如果访问的是 ref变量，就返回其 .value值；如果不是 ref变量，就直接返回。
语法：const x = unref(y)

customRef

作用：自定义ref对象，把ref对象改写成get/set，进一步可以为它们添加 track/trigger。

  import { customRef, isRef } from 'vue'
  const num = customRef((track, trigger)=>{
    let value = 100
    return {
      get () {
        track()
        return value
      },
      set (newVal) {
        value = newVal
        trigger()
      }
    }
  })
  console.log(isRef(num)) // true

toRef

作用：把一个 reactive对象中的某个属性变成 ref 变量。
语法：const x = toRef(reactive(obj), ‘key’) // x.value

const user = {name:'zhangsan',age:16};
const age =  toRef(reacctive(user),'age')

toRefs

作用：把一个reactive响应式对象变成ref变量。
语法：const obj1 = toRefs(reactive(obj))
应用：在子组件中接收父组件传递过来的 props时，使用 toRefs把它变成响应式的。

shallowReactive

作用：定义一个reactive变量，只对它的第一层进行Proxy,，所以只有第一层变化时视图才更新。
语法：const obj = shallowReactive({a:{b:9}})

shallowRef 和 triggerRef

作用：对复杂层级的对象，只将其第一层变成 ref 响应。 (性能优化)
语法：const x = shallowRef({a:{b:{c:1}}, d:2}) 如此a、b、c、d变化都不会自动更新，需要借助 triggerRef 来强制更新。
shallowRef仅会监听.value的变化，只有.value发生变化时，视图才会更新。如果仅需要更新某一层的数据，则可以调用trrigerRef重新进行对ref赋值

递归监听:
vue3.0中通过递归监听，来监听ref和reactive中的数据，通过递归监听，将每一层的数据包装成了一个Proxy对象，但是递归监听会大大降低数据的性能

非递归监听:
vue3.0中通过shallowRef和shallowReactive实现非递归监听。
shallowReactive仅会监听第一层的数据 ，将第一层的数据包装成Proxy对象，如果第一层数据不发生变化的情况下，视图将不会同步更新被修改的数据。
shallowRef仅会监听.value的变化，只有.value发生变化时，视图才会更新。如果仅需要更新某一层的数据，则可以调用trrigerRef重新进行对ref赋值

  let obj = shallowRef({
    a:1,
    b:{
        c:2,
        d:3
    }
  })
  
  obj.value.a = 2 //视图不更新
  triggerRef(obj) // 强制更新视图
  obj.value = {a:2} // 视图更新

reactive

作用：定义响应式变量，一般用于定义引用数据类型。如果是基本数据类型，建议使用ref来定义。
语法：const info = reactive([] | {})
注意：reactive的参数必须是对象（JSON/arr），否则将不会包装成Proxy对象，不会实现响应式,传递了其他对象，默认情况下修改对象界面不会更新，如果想更新可以通过重新赋值的方式

import {reactive} from 'vue'
let state = reactive({
        arr: [1,2,3],
        time:new Date(),
})
// 没有重新赋值，不会响应式修改到页面
 state.time.setDate(new Date(state.time.getDate + 1))
 // 重新赋值后，可以响应式到页面
state.time = state.time.setDate(new Date(state.time.getDate + 1))

readonly

作用：把一个对象，变成只读的。
语法：const rs = readonly(ref对象 | reactive对象 | 普通对象)

isReadonly

作用：把一个对象，变成只读的。
语法：const rs = readonly(ref对象 | reactive对象 | 普通对象)

isReactive

作用：判断一变量是不是 reactive的。
注意：被 readonly代理过的 reactive变量，调用 isReactive 也是返回 true的。

isProxy

作用：判断一个变量是不是 readonly 或 reactive的。

toRaw

作用：得到返回 reactive变量或 readonly变量的"原始对象"。
语法:：const raw = toRaw(reactive变量或readonly变量)
说明：reactive(obj)、readonly(obj) 和 obj 之间是一种代理关系，并且它们之间是一种浅拷贝的关系。obj 变化，会导致reactive(obj) 同步变化，反之一样。

markRaw

作用：把一个普通对象标记成"永久原始"，从此将无法再变成proxy了。
语法：const raw = markRaw({a,b})

shallowReadonly

作用：定义一个reactive变量，只有第一层是只读的。
语法：const obj = shallowReadonly({a:{b:9}})

计算属性和侦听器

computed

作用：对响应式变量进行缓存计算。
语法：const c = computed(fn / {get,set})

const text = computed({
    set(){},
    get(){}
})

watch

作用：用于监听响应式变量的变化，组件初始化时，它不执行。
语法：const stop = watch(x, (new,old)=>{})，调用stop() 可以停止监听。
语法：const stop = watch([x,y], ([newX,newY],[oldX,oldY])=>{})，调用stop()可以停止监听。

const stop = watch(
    [age,name],
    ([newage,oldage],[newname,oldname])=>{}
)

父子组件传值

defineProps和defineEmits

作用：父子组件传值

// 父组件给子组件传值
const props = defineProps({
    name:{
        default:'name'
    }
})
// js中使用prop数据
props.name

// 子组件给父组件传值
emit = defineEmits(['getName','getAge'])

emit('getName','zhangsan')

provide / inject

作用：在组件树中自上而下地传递数据.
语法：provide(‘key’, value)
语法：const value = inject(‘key’, ‘默认值’)

// 父组件

provide('msg',123)

// 子组件

const msg = inject('msg')

路由

定义路由文件

import { createWebHistory, createRouter } from 'vue-router'
const history = createWebHistory()
const router = new createRouter({
    history,
    routes:[
        {
            name:'Home',
            path:'/',
            component:Home
        },
    ]

})

export default router

主文件中引入路由main.js

app.use(route)

页面内路由跳转

import { useRouter } from 'vue-router';
const router = useRouter()
router.push('/login')

Vuex

定义vuex文件

import  {createStore} from 'vuex'

export default createStore({
    state(){
        return {
            count:0
        }
    },
    mutations: {
        add(state){
            state.count++
        }
    },
    actions: {

    }
})

主文件main.js中引入

app.use(store)

组件中调用vuex

import {useStore} from 'vuex'

const store = useStore();
// 访问state数据
store.state.count
// 访问mutation
store.commit('add')
// 访问action
store.dispatch('add')

生命周期执行顺序

1、setup
2. beforeCreate
3. created
4. beforeMount
5. mounted
6. beforeUpdate
7. updated
8. beforeDestory
9. destoryed

UI框架

ACRO.design: https://arco.design/vue/docs/start
Element Plus: https://element-plus.gitee.io/zh-CN/