Vue笔记（八）Vue3 新特性

最新推荐文章于 2023-07-25 07:33:25 发布

Tmil

最新推荐文章于 2023-07-25 07:33:25 发布

阅读量501

点赞数

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

本文链接：https://blog.csdn.net/qq_46067727/article/details/127403746

版权

本文详细介绍了Vue3.0的新特性，包括使用vue-cli和vite创建工程，重点讲解了Composition API如setup、ref、reactive、watchEffect等的用法和优势。此外，还探讨了Vue3的新组件如Fragment、Teleport和Suspense，以及全局API的迁移和其他变动。

摘要由CSDN通过智能技术生成

shallowReactive与shallowRef

readonly与shallowReadonly

Vue2 Options（配置） API存在的问题

一、创建Vue3.0工程

使用vue-cli创建

##查看版本，确保@vue/cli版本在4.5.0以上

vue --version

##安装或升级你的@vue/cli

npm install -g @vue-cli

##创建

vue create vue_test

##启动

cd vue_test

npm run serve

使用vite创建

vite — 新一代前端构建工具，优势：

1.开发环境中，无需打包操作，可快速的冷启动。

2.轻量快速的热重载（HMR）。

3.真正的按需编译，不再等待整个应用编译完成

##创建工程（vue_test_vite是工程名）

npm init vite-app vue_test_vite

##进入工程目录

cd vue_test_vite

##安装依赖

npm install

##运行

npm run dev

二、常用Composition API

初识setup

Vue3.0中的一个新的配置项，值为一个函数。setup是所有Composition API（组合API）的“外壳”，组件中所用到的数据、方法等，均要配置在setup中。两种返回值：

1.返回一个对象，对象中的属性、方法在模板中可直接使用。

2.返回一个渲染函数，可以自定义渲染内容。

注意：

1.尽量不要与Vue2.x配置混用。Vue2.x配置（data、methods、computed...）中可以访问到setup中的属性、方法；但在setup中不能访问到Vue2.x配置；如果有重名，写在靠后位置的覆盖前面的。

2.setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件配合。）

<template>
<!-- Vue3组件中的模板结构可以没有根标签 -->
<h1>用户信息</h1>
<h2>姓名:{
  {name}}</h2>
<h2>年龄:{
  {age}}</h2>
<button @click="sayHello">hello</button>
</template>
<script>
import {h} from 'vue'
export default {
  name: 'App',
  setup(){
    let name='Ada'
    let age=22
    function sayHello() {
      alert(`Hello!I'm ${name},${age} years old!`)
    }
    // 返回一个对象
    // return{name,age,sayHello}
    // 返回一个渲染函数
    return ()=> h('h1','Hello,你好')
  }
}
</script>

ref函数

用于定义一个响应式的数据，语法：

//创建一个包含响应式数据的引用对象（reference对象）

const xx=ref(initValue)

//JS中操作数据

xx.value

//模板中读取数据，不需要value，直接

<div>{ {xx}}</div>

接收的数据可以是基本类型、对象类型；基本类型的数据响应式依然是靠Object.defineProperty()的get和set完成的；对象类型的数据内部利用了Vue3.0中的一个新函数——reactive。

<template>
<h1>用户信息</h1>
<h2>姓名:{
  {name}}</h2>
<h2>年龄:{
  {age}}</h2>
<h2>工作：{
  {job.type}}</h2>
<h2>薪水：{
  {job.salary}}</h2>
<button @click="changeInfo">change</button>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    let name=ref('Tml')
    let age=ref(23)
    let job=ref({
      type:'前端工程师',
      salary:'10k'
    })
    function changeInfo() {
      age.value='26'
      job.value.type='全栈工程师'
      job.value.salary='60k'
    }
    // 返回一个对象
    return{name,age,changeInfo,job}
  },
}
</script>

reactive函数

用于定义一个对象类型的响应式数据（基本类型用ref函数）。语法：

const 代理对象 =reactive（被代理对象）//接收一个对象（或数组），返回一个代理器对象（proxy对象）

reactive定义的响应式数据是“深层次的”，内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据都是响应式的。

<template>
<h1>用户信息</h1>
<h2>姓名:{
  {person.name}}</h2>
<h2>年龄:{
  {person.age}}</h2>
<h2>工作：{
  {person.job.type}}</h2>
<h2>薪水：{
  {person.job.salary}}</h2>
<h2>爱好：{
  {person.hobby[0]}}、{
  {person.hobby[1]}}、{
  {person.hobby[2]}}</h2>
<button @click="cha