Vue3 的新增特点和setup函数的使用

一.认识Vue3

管网地址:https://v3.cn.vuejs.org/guide/introduction.html

1.相关的信息

• Vue.js 3.0 “One Piece” 正式版在今年9月份发布
• Vue3支持vue2的大多数特性
• 更好的支持Typescrip

2.性能提升

• 打包大小减少41%
• 初次渲染快55%, 更新渲染快133%
• 内存减少54%
• 使用Proxy代替defineProperty实现数据响应式
• 重写虚拟DOM的实现和Tree-Shaking

3.新增特性

• Composition (组合) API
• setup
• 新组件
• 其它API更新

二.创建vue3项目

1.使用 vue-cli 创建

## 安装或者升级
npm install -g @vue/cli
## 保证 vue cli 版本在 4.5.0 以上
vue --version
## 创建项目
vue create my-project
## 运行项目
npm run serve
安装选项
         1.---------
            Default ([Vue 2] babel, eslint)
            Default (Vue 3 Preview) ([Vue 3] babel, eslint)  
            > Manually select features        手动选择 
         2.---------------
         特别注意点:空格是选择，点回车是下一步
            (*) Choose Vue version  选择vue版本
            >(*) Babel  语法转换器把ES6转换成ES5
             (*) TypeScript  是JavaScript 的一个超集，扩展了 JavaScript 的语法
             ( ) Progressive Web App (PWA) Support 支持渐进式网页应用程序
             () Router   路由管理器
             () Vuex    状态管理库
             (*) CSS Pre-processors   css预处理器如 scss less
             (*) Linter / Formatter  代码风格,格式校验
             ( ) Unit Testing  单元测试
             ( ) E2E Testing    端到端测试
          3.---------------
          Choose a version of Vue.js that you want to start the project with - 选择 3.x (Preview)
            因为我们需要学习vue3 所以选择3.0版本
          4.---------------
             Use class-style component syntax? (Y/n)    y
          5-----------
            ESLint with error prevention only  仅错误预防
            ESLint + Airbnb config      Airbnb配置
            ESLint + Standard config        标准配置
            >ESLint + Prettier
            TSLint (deprecated) 
                >Lint on save 保存时检查
                Lint and fix on commit 提交时检查 
          6.选择 Babel, PostCSS, ESLint 等自定义配置的存放位置
                In dedicated config files 在专用的配置文件中
                In package.json 在package.json
          7 将此作为将来项目的预置吗
                >In dedicated config files 在专用的配置文件中
                In package.json 在package.json
          8.Save this as a preset for future projects? No
                N
          9保存预设为
                Save preset as:

2.使用 vite 创建

• 文档:https://v3.cn.vuejs.org/guide/installation.html#vite
• Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。
• 通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

1. 使用 npm：
npm init @vitejs/app <project-name>
cd <project-name>
npm install
npm run dev
2.或者使用 yarn：
yarn create @vitejs/app <project-name>
cd <project-name>
yarn
yarn dev
3.可能会出现这样的情况，当你的用户名中有一个空格，比如“Mike Baker”时，Vite 就不能成功创建。这时可以尝试：
create-vite-app <project-name>

三.对App.vue和main.ts的内容基本介绍

1.App.vue

<template>
<!-- Vue2中的html模板中必须要有一对根标签,Vue3组件的html模板中可以没有根标签 -->
  <img alt="Vue logo" src="./assets/logo.png">
  <!-- 使用这个子级组件 -->
  <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</template>

<script lang="ts">
// 这里可以使用ts代码

// defineComponent函数,目的是定义一个组件,内部可以传入一个配置对象
// 注：defineComponent 在TypeScript下，给予了组件正确的参数类型推断
import { defineComponent } from 'vue';
// 引入一个子级组件
import HelloWorld from './components/HelloWorld.vue';
// 暴露出去一个定义好的组件
export default defineComponent({
  // 当前组件的名字是App
  name: 'App',
  // 注册组件
  components: {
    // 注册一个子级组件
    HelloWorld
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2.main.ts

// 程序的主入口文件,ts文件,是main.ts
// 引入createApp函数,创建对应的应用,产生对应的实例对象
import { createApp } from 'vue'
// 引入App组件(所有组件的父级组件)
import App from './App.vue'
// 创建App应用返回对应的实例对象,调用mount方法进行挂载
createApp(App).mount('#app')

四.Composition API(组合式 API)

1. 什么是组合式 API

通过创建 Vue 组件，我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。尤其是当你的应用变得非常大的时候——想想几百个组件。处理这样的大型应用时，共享和重用代码变得尤为重要。

2.setup 组件选项

1. 所有的组合API函数都在此使用, 只在初始化时执行一次
2. 注意点:在 setup 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法在 setup 中被获取
3. setup 选项是一个接收 props 和 context 的函数，。此外，我们将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。
4. 创建组件实例 => 初始化 props => 调用 setup 函数；在 beforeCreate 钩子之前调用
5. 当 setup 添加到组件中：

/* 使用vue3的composition API */
  setup (props,context) {
    console.log(props) // { user: '' }
    return { } // 这里返回的任何内容都可以用于组件的其余部分
    
  }
 // 组件的“其余部分”

<template>
  <div id="app">
    {{name}}
    <p>{{age}}</p>
    <button @click="plusOne()">+</button>
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
  name:'app',
  // 传入 props
  props: ['user'],
  /* 使用vue3的composition API */
  setup(props,context){
  	console.log(props) // { user: '' }
  	// 这边的ref在后面介绍
    const name =ref('小四')
    const age=ref(18)
    function plusOne(){
      age.value++ //想改变值或获取值 必须.value
    }
    return { //必须返回 模板中才能使用
      name,
      age,
      plusOne
    }
  }
}
</script>
注意:
	props 对象是响应式
	不能解构 props 对象，会使其失去响应性
	不可直接修改 props，会触发警告

3.对setup的第二个参数介绍

context是一个对象,里面有attrs对象(获取当前标签上的所有的属性的对象,但是该属性是在props中没有声明接收的所有的),emit(分发方法),slots对象(插槽)

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  setup(props, context) {
    console.log(context); // { attrs, slots, emit }
  }
};

4.ref

• 响应式数据:数据变化,页面跟着渲染变化
• ref 是一个函数,
• 作用:定义一个响应式的数据,返回的是一个Ref对象,对象中有一个value属性,如果需要对数据进行操作,需要使用该Ref对象调用value属性的方式进行数据的操作
• 语法: const xxx = ref(initValue):
  js中操作数据: xxx.value
  模板中操作数据: 不需要.value
  一般用来定义一个基本类型的响应式数据

// 如果要使用ref,需要先引入ref
import { defineComponent,ref } from 'vue';
// 暴露出去一个定义好的组件
export default defineComponent({
		/* 在Vue3中依然可以使用data和methods配置, 但建议使用其新语法实现 */
	  // data () {
	  //   return {
	  //     count: 0
	  //   }
	  // },
	  // methods: {
	  //   update () {
	  //     this.count++
	  //   }
	  // }
	  /* 使用vue3的composition API */
	setup(){
	  //  const count = 0;  // 此时的数据并不是响应式的数据(响应式数据:数据变化,页面跟着渲染变化)
	  // 定义响应式数据ref对象
	  const count = ref(0)
	  // 更新响应式数据函数
	  function update () {
	      // alert('update')
	      count.value = count.value + 1
	  }
	  return {
		count,
		update
	 }
})

总结:今天学习了vue3新增的特点,和性能的提升,还有组合式API可以将界面中重复的部分连同其功能一起提取为可重用的代码段,还有对setup 函数的使用,以上就是今天的学习总结