【Vue3】初识Vue3

Vue3快速上手

1. Vue3简介

• 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王）
• 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者
• github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0

2. Vue3带来了什么

1. 性能的提升

• 打包大小减少41%

• 初次渲染快55%, 更新渲染快133%

• 内存减少54%

  …

2. 源码的升级

• 使用Proxy代替defineProperty实现响应式

• 重写虚拟DOM的实现和Tree-Shaking

  …

3. 拥抱TypeScript

• Vue3可以更好的支持TypeScript

4. 新的特性

1. Composition API（组合API）

   • setup配置
   • ref与reactive
   • watch与watchEffect
   • provide与inject
   • …

2. 新的内置组件

   • Fragment
   • Teleport
   • Suspense

3. 其他改变

   • 新的生命周期钩子
   • data 选项应始终被声明为一个函数
   • 移除keyCode支持作为 v-on 的修饰符
   • …

一、创建Vue3.0工程

1. 使用 vue-cli 创建

官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

## 查看@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

2. 使用 vite 创建

官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite

vite官网：https://vitejs.cn

• 什么是vite？—— 新一代前端构建工具。
• 优势如下：
  • 开发环境中，无需打包操作，可快速的冷启动。
  • 轻量快速的热重载（HMR）。
  • 真正的按需编译，不再等待整个应用编译完成。

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

二、常用 Composition API

官方文档

1. 拉开序幕的setup

1. 理解：Vue3.0中一个新的配置项，值为一个函数。

2. setup是所有Composition API（组合API）“ 表演的舞台 ”。

3. 组件中所用到的：数据、方法等等，均要配置在setup中。

4. setup函数的两种返回值：

   1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
   2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）

5. 注意点：

   1. 尽量不要与Vue2.x配置混用
      • Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。
      • 但在setup中不能访问到Vue2.x配置（data、methos、computed…）。
      • 如果有重名, setup优先。
   2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

   <template>
       <h1>一个人的信息</h1>
       <h2>姓名：{
       { name }}</h2>
       <h2>年龄：{
       { age }}</h2>
       <h2>性别：{
       { sex }}</h2>
       <h2>a的值是：{
       { a }}</h2>
       <button @click="sayHello">说话(Vue3所配置的——sayHello)</button><br /><br />
       <button @click="sayWelcome">说话(Vue2所配置的——sayWelcome)</button><br /><br />
       <button @click="test1">测试一下在Vue2的配置中去读取Vue3中的数据、方法</button><br /><br />
       <button @click="test2">测试一下在Vue3的setup配置中去读取Vue2中的数据、方法</button>
   </template>
   
   <script>
   // import {h} from 'vue'
   export default {
          
       name: 'App',
       data() {
          
           return {
          
               sex: '男',
               a: 100
           }
       },
       methods: {
          
           sayWelcome() {
          
               alert('欢迎来到尚硅谷学习')
           },
           test1() {
          
               console.log(this.sex)
               console.log(this.name)
               console.log(this.age)
               console.log(this.sayHello)
           }
       },
       //此处只是测试一下setup，暂时不考虑响应式的问题。
       async setup() {
          
           //数据
           let name = '张三'
           let age = 18
           let a = 200
   
           //方法
           function sayHello() {
          
               alert(`我叫${
            name}，我${
            age}岁了，你好啊！`)
           }
           function test2() {
          
               console.log(name)
               console.log(age)
               console.log(sayHello)
               console.log(this.sex)
               console.log(this.sayWelcome)
           }
   
           //返回一个对象（常用）
           return {
          
               name,
               age,
               sayHello,
               test2,
               a
           }
   
           //返回一个函数（渲染函数）
           // return ()=> h('h1','尚硅谷')
       }
   }
   </script>
   

2. ref函数

• 作用: 定义一个响应式的数据

• 语法: const xxx = ref(initValue)

  • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。

  • JS中操作数据： xxx.value

  • 模板中读取数据: 不需要.value，直接：<div>{ {xxx}}</div>

    <template>
    	<h1>一个人的信息</h1>
    	<h2>姓名：{
          {name}}</h2>
    	<h2>年龄：{
          {age}}</h2>
    	<h3>工作种类：{
          {job.type}}</h3>
    	<h3>工作薪水：{
          {job.salary}}</h3>
    	<button @click="changeInfo">修改人的信息</button>
    </template>
    
    <script>
    	import {
             ref} from 'vue'
    	export default {
             
    		name: 'App',
    		setup(){
             
    			//数据
    			let name = ref('张三')
    			let age = ref(18)
    			let job = ref({
             
    				type:'前端工程师',
    				salary:'30K'
    			})
    
    			//方法
    			function changeInfo(){
             
    				name.value = '李四'
    				age.value = 48
    				// console.log(job.value)
    				job.value.type = 'UI设计师'
    				job.value.salary = '60K'
    				// console.log(name,age)
    			}
    
    			//返回一个对象（常用）
    			return {
             
    				name,
    				age,
    				job,
    				changeInfo
    			}
    		}
    	}
    </script>
    

• 备注：

  • 接收的数据可以是：基本类型、也可以是对象类型。
  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
  • 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

3. reactive函数

• 作用： 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
• reactive定义的响应式数据是“深层次的”。
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

<template>
	<h1>一个人的信息</h1>
	<h2>姓名：{
  {person.name}}</h2>
	<h2>年龄：{
  {person.age}}</h2>
	<h3>工作种类：{
  {person.job.type}}</h3>