Bootstrap

Vue3新增的知识

Vue3新增的知识

本文默认你已经掌握了Vue2所有知识,从而让你了解Vue2到Vue3的改变

Vue3特点

  • 新增组合API。作用:可有更好的逻辑复用和代码组织;统一功能的代码不再像Vue2那样分散,虽然Vue2可以用mixin来实现复用代码,但是也存在问题;比如:方法或者属性名冲突;代码来源不清楚等
  • 用Proxy代替Object.defined=Property重构了响应系统,可以监听到数组下标变化以及对象新增属性。因为监听的不是对象属性而是对象本身;还可以拦截apply、has等13种方法
  • v-if和v-for优先级已经更改,但是仍然不推荐同时使用
  • 新增了setup生命周期钩子,setup代替了Vue2的beforeCreate、created两个生命周期时机,其他的,例如:mounted等钩子函数,使用时需要加on前缀,即是onMounted
  • 使用props或者时emits需要使用defineProps()、defineEmits()进行接收声明
  • 新增了三个组件:Fragment支持多个根节点;Suspense可以在组件渲染之前的等待时间显示指定内容;Teleport可以让子组件能够在视觉上跳转父组件
  • 新增指令v-memo,可以缓存html模板;使用内存换取渲染时间
  • 重构了虚拟DOM,
  • 支持在style使用v-bind,给CSS绑定js变量;
  • 全局函数set、delete以及实例方法 s e t 、 set、 setdelete移除
  • o n , on, on,off和$once实例方法移除
  • 不再支持IE11

Vue3中响应式数据的使用

  1. ref()实现数据双向绑定
// 1、 基本类型使用ref  此时0就是num的初始值,且是响应式的
let num = ref(0)
// 在Vue模板中使用num 
{{num}}
// 在脚本中使用num
num.value

// 2、引用类型使用ref
let zhw = ref({
    name : 'zhw',
    age : 18
});
// 在Vue模板中使用
{{zhw.name}}
// 在脚本中使用
zhw.value.name

**注意:**一般项目开发中,ref只用于实现基本数据类型的响应式

  1. reactive() 实现数据绑定
// reactive只用于实现引用数据类型的响应式
let zhw = reactive({
    name : 'zhw',
    age : 18
});
// 在Vue模板中使用
{{zhw.name}}
// 在脚本中使用
zhw.value.name

一般项目开发中,是如何使用响应式数据的呢?

// 1、把当前组件所有用到的响应式数据,包括基本数据类型和复杂数据类型
// 都放在state对象中
const state = reactive({
    num : 0,
    zhw : {
        name : 'zhw',
        age 18
    }
})
// 使用toRefs解构,让解构后的也是响应式
const {num,zhw} = toRefs(state);
// 在Vue模板中使用
{{zhw.name}}---{{num}}
// 在脚本中使用
zhw.value.name

Vue3的响应式原理Proxy

let zhw = {
    name : 'zhw',
    age : 18
};
// new Proxy 创建了参数一zhw 的代理对象  
// 该代理对象上的属性和属性值  和 被代理对象一样
let zhwProxy = new Proxy(zhw,{
    // 访问zhwProxy 代理对象的属性时执行  zhwProxy.name
    // target  : 被代理对象
    // prop :访问的属性
    get(target,prop) {
        return target[prop]
    },
    // zhwProxy.name = value 时执行
    sat(target,prop,value) {
        target[prop] = value
    }
})

Vue3中获取DOM元素对象或者组件实例

  1. 使用ref获取
// Vue模板中
<p ref='myRef'>ref测试<p>
// 脚本中

// 注意1、这里的变量需要和模板中的ref属性值保持一致 都是myRef
let myRef = ref(); 

// setup里的代码执行时期 相当于Vue2的beforeCreate created,所以不能直接获取DOM元素
// 需要使用nextTick  或者 onMounted 获取DOM

// 在下一次DOM更新的时候执行,只会调用一次
nextTick(()=>{
    // 因为myRef初始值被ref包裹,所以需要value
    console.log(myRef.value)
})

// 如果以上代码不是写在setup语法糖里,则最后还需要return

return {
    myRef
}

setup语法糖

setup语法糖格式如下:

<script setup> //加上setup:script之间的代码,会被Vue内部自动添加到原先的setup方法中
    // 之前写在setup()钩子的内容,都可以直接写在这块,且不用return
</script>

观察者:Vue3中的数据监听watch

import {watch,watchEffect} from 'vue';
// watch(要监听的响应式数据,数据更新时执行的回调)

// 在页面刷新的时候,立即监听,相当于Vue2中的immediately属性
watchEffect(要监听的响应式数据,数据更新时执行的回调)

计算属性

import {computed} from 'vue';
// computed返回值就是计算属性的值,接受返回值之后,可以直接在模板使用
const val = computed(()=>{
    return 处理过的值
})

Vue3中的组件传值

一、父组件给子组件传值

// 父组件中
<Child :msg="msg"/>
import Child from '子组件所在的位置'
let msg = ref('我是父组件')

// 子组件中
const props = defineProps<{
    msg : string
}>()
// 模板中使用
{{props.msg}}

二、子组件给父组件传值

// 父组件中
<Child @autoEvent="fn"/>
import Child from '子组件所在的位置'
const fn = (msg) => {
    console.log(msg)  // 我是子组件
}

// 子组件中
<button @click="forFather">给父组件传值</button>
const emit = defineEmits<{
    (event:'autoEvent',msg:string) : void
}>()
// 点击按钮 触发方法
const forFather = ()=> {
    emit('autoEvent','我是子组件')
}

插槽:作用域父子组件

一、匿名插槽

// 父组件中
import Child from '子组件所在的位置'
<Child>
    // 填充插槽的内容
    // 匿名插槽不需要template
    <p>我是匿名插槽的显示者</p>
</Child>

// 子组件Child中
<div>
    <slot></slot>
</div>

二、具名插槽

v-slot:zhw是写在template上的,他的语法糖是:#zhw

// 父组件中
import Child from '子组件所在的位置'
<Child>
    // 填充插槽的内容
    <template v-slot:zhw>
        <p>我是名字为zhw插槽的显示者</p>
    </template>
    <template #whl>
        <p>我是名字为whl插槽的显示者</p>
    </template>
</Child>

// 子组件Child中
<div>
    <slot name="zhw"></slot>
    <slot name="whl"></slot>
</div>

三、作用域插槽

插槽的作用域:在父组件中的子组件标签内部操作子组件数据

// 父组件中
import Child from '子组件所在的位置'
<Child>
    // 填充插槽的内容

    // 这里的scope是自定义的,用来收集子组件内部slot上所有的标签属性的值,除了name属性
    <template #zhw="scope">
        <p>我是子组件的tit:{{scope.tit}}</p>
    </template>
</Child>

// 子组件Child中
<div>
    <slot name="zhw" tit="我是子组件"></slot>
</div>

更换Vue模板插件

之前在Vue2中,使用的是Vetur插件,使得Vue模板代码高亮; 现在,在Vue3中,应该禁用Vetur插件,从而使用Volar,即是Vue Language Features,从而使得Vue模板代码高亮

;