Vue3使用入门、优点

Vue3使用入门、优点

相比Vue2有什么优点？

1. diff算法的提升-vue2是全量对比，vue3新增了静态标记
2. 静态提升-vue2不管是否参与更新都会重新创建再渲染，vue3不参与更新的元素在渲染时直接复用。hoistStatic->SSR优化，静态绑定class，id不再做更新处理
3. 时间侦听器缓存
4. ssr渲染
5. 更好的ts支持-vue2部分支持，vue3覆盖（新增Fragment、Teleport、Suspense）
6. Composition Api-vue2使用options api写法，vue3setup写法（不一定都能接受这种改变）
7. 更先进的组件-vue3在template下可写两个组件，将为我们创建一个虚拟的Fragment节点
8. 自定义渲染api
9. 按需编译，体积更小-按需加载（配合vite）
10. 支持多根节点组件

总结：最大优点是性能提升1.3=>2.x，不再需要$set

介绍一个vue3实时编译学习网址：https://vue-next-template-explorer.netlify.app

文章composition api地址：https://vuejs.org/api/composition-api-lifecycle.html

关于2.0迁移3.0（tip：vue2如果运行比较稳定，没大的必要就别更新了）

• 90%代码都可复用（兼容options api写法）
• Composition Api作为新增API不会影响旧的逻辑代码
• Mixin不再推荐，filters已经遗弃

关于vite-官方推荐，类似webpack，但轻量快速

从零开始

• 安装最新版本得到Vue3

  npm install -g @vue/cli
  

• 终端创建项目

  vue create todolist
  

• 选择Manually select features自定义设置

• 勾选Babel、TypeScript、Router、Vuex、CSS Pre-proccessors（预处理器）、Linter/Formatter

• 选择3.x

• use class-style component syntax（class语法组件）：n

• JSX：y

• history：n（使用哈希路由）

• 选择sass/scss(with dart-sass)。(以前一直在用node-sass，查了下区别，node-sass是自动编译实时的,dart-sass需要保存后才会生效 推荐dart-sass 性能更好(也是 sass 官方使用的),而且 node-sass 因为国情问题经常装不上)

• 选择ESLint+Standard config（默认标配版本，其余是某大公司推荐版本）

• 选择Lint on save

• esLint配置存放选择In dedicated config files

• 最后选择是否保存上述配置

初始目录展示，进入目录

（vscode可安装vue extension pack插件开发过程进行快捷路径引入）

代码片段演示

模板（多个根、v-for使用）：

<template>
    <h1>xxx</h1>
    <input type="text" v-model="inputValue">
    <ul v-for="(item,index) in todos" :key="'todo-'+index">
        <li>{{item}}</li>
    </ul>
    <button @click="add">添加</button>
</template>

脚本（setup双向绑定、vuex使用及生命周期钩子展示）：

import {defineComponent,reactive,ref,computed,onMounted,onUpdated,onUnmounted,onRenderTriggered,onRenderTracked} from 'vue'
import store from '@/store'

export default defineComponent({
	//有setup就无this概念了
	setup(){
		//创建空值变量
		const inputValue = res('')
		
		//方法
		const add = (value:string)=>{
			if(value.trim()==='') return
			store.commit('add',value)
			inputValue.value = ''
		}
		
		//响应的状态管理器
		return reactive({
			inputValue,
			todos:computed(()=>store.state.todos),
			add,
		})
		
		//生命周期钩子（vue3已移除了created相关，其他都是vue2基础上前面加on即可，常用举例）
		onMounted(()=>{})
		onUpdated(()=>{})
		onUnmounted(()=>{})
		
		//新增的钩子函数（此挂钩仅在开发模式下运行，在服务器端渲染期间不调用）
		onRenderTriggered(()=>{
			console.log('onRenderTriggered')
		})
		onRenderTracked((e)=>{
			console.log(e)
			//debugger
			//检查哪个依赖性导致组件重新渲染（一般调用多次）
		})
		
	},
	//可兼容vue2写法
	mounted(){}
})

---

原文链接：https://xiaokar.gitee.io/2022/04/26/vue3start
至此，基本使用演示完成，后续继续学习，奥利给！
（如有不对的地方，望大佬指正，共同学习进步）