vue3+ts+element-plus（包含vuex、router）随笔
#vue3与vue2区别以及vue3优点
1. 默认进⾏懒观察（lazy observation）在
2.x 版本⾥，不管数据多⼤，都会在⼀开始就为其创建观察者。当数据很⼤时，这可能会在
页⾯载⼊时造成明显的性能压⼒。3.x 版本，只会对「被⽤于渲染初始可见部分的数据」创建观察者，⽽且 3.x 的观察者更⾼效。
2. 更精准的变更通知。2.x 版本中，使⽤ Vue.set 来给对象新增⼀个属性时，这个对象的所有 watcher 都会重新运⾏；
3.x 版本中，只
有依赖那个属性的 watcher 才会重新运⾏。
3. 3.0 新加⼊了 TypeScript 以及 PWA 的⽀持
4. 部分命令发⽣了变化：
a.下载安装 npm install -g vue@cli
b.删除了vue list
c.创建项⽬ vue create
d.启动项⽬ npm run serve
5. 默认项⽬⽬录结构也发⽣了变化：
移除了配置⽂件⽬录，config 和 build ⽂件夹
移除了 static ⽂件夹，新增 public ⽂件夹，并且 index.html 移动到 public 中
在 src ⽂件夹中新增了 views ⽂件夹，⽤于分类 视图组件 和 公共组件
移除data 取⽽代之使⽤ setup
在新版当中setup等效于之前2.0版本当中得到beforeCreate，和created，它是在组件初始化的时候执⾏，甚⾄是⽐created更早执⾏。值得注意的是，在3.0当中如果你要想使⽤setup⾥的数据，你需要将⽤到值return出来，返回出来的值在模板当中都是可以使⽤的。
假设如果你不return出来，⽽直接去使⽤的话浏览器是会提醒你：
如果要想在页⾯中使⽤⽣命周期函数的，根据以往2.0的操作是直接在页⾯中写⼊⽣命周期，⽽现在是需要去引⽤的，这就是为什么3.0能够将代码压缩到更低的原因。
如何知道数据发⽣了变化，Vue3 之前使⽤了 ES5 的⼀个 API Object.defineProperty。Vue3 中使⽤了 ES6 的 Proxy，都是对需要侦测的数据进⾏ 变化侦测 ，添加 getter 和 setter ，这样就可以知道数据何时被读取和修改。
如何知道数据变化后哪⾥需要修改，Vue 对于每个数据都收集了与之相关的 依赖 ，这⾥的依赖其实就是⼀个对象，保存有该数据的旧值及数据变化后需要执⾏的函数。每个响应式的数据变化时会遍历通知其对应的每个依赖，依赖收到通知后会判断⼀下新旧值有没有发⽣变化，如果变化则执⾏回调函数响应数据变化（⽐如修改 dom）。
#vue3⽣命周期
vue3中使⽤的⽣命周期
使⽤defineComponent 构建应⽤及绑定事件
使⽤setup(props,content)⽗⼦通信
使⽤ reactive 绑定数据
使⽤ ref ( torefs ) 绑定数据
使⽤ getCurrentInstance 获取当前实例化对象上下⽂信
watch、watchEffect 数据监听
⽣命周期+axios数据请求
简单的 TodoList 点餐功能
computed 对应vue2中computed，使⽤⽅法不同
⽣命周期
setup() ：开始创建组件之前，在beforeCreate和created之前执⾏。创建的是data和method
onBeforeMount() : 组件挂载到节点上之前执⾏的函数。
onMounted() : 组件挂载完成后执⾏的函数。
onBeforeUpdate(): 组件更新之前执⾏的函数。
onUpdated(): 组件更新完成之后执⾏的函数。
onUpdated(): 组件更新完成之后执⾏的函数。
⽣命周期
onBeforeUnmount(): 组件卸载之前执⾏的函数。
onUnmounted(): 组件卸载完成后执⾏的函数
若组件被 keep-alive 包含，则多出下⾯两个钩⼦函数。
onActivated(): 被包含在中的组件，会多出两个⽣命周期钩⼦函数。被激活时执⾏onDeactivated(): ⽐如从 A组件，切换到 B 组件，A 组件消失时执⾏。
VUE2VUE3 beforeCreate setup() created setup() beforeMount onBeforeMount mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated beforeDestroy onBeforeUnmount destroyed onUnmounted activated onActivated deactivated onDeactivated
import{
ref,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
onErrorCaptured,
onRenderTracked,
onRenderTriggered
}from'vue'
export default{
setup(){
let test =ref('测试');
// 挂载开始之前被调⽤
onBeforeMount(()=>{
console.log('onBeforeMount组件挂载到节点上之前执⾏的函数', test.value)
});
vue element admin// 实例被挂载后调⽤，不会保证所有的⼦组件也被挂载完
onMounted(()=>{
console.log('onMounted组件挂载完成后执⾏的函数', test.value)
});
// DOM更新前
onBeforeUpdate(()=>{
console.log('onBeforeUpdate组件更新之前执⾏的函数', test.value)
});
// DOM更新后，不会保证所有的⼦组件也都⼀起被重绘
onUpdated(()=>{
console.log('onUpdated组件更新完成之后执⾏的函数', test.value)
});
// 卸载组件实例之前，此时实例仍然是完全正常的
onBeforeUnmount(()=>{
console.log('onBeforeUnmount组件卸载之前执⾏的函数', test.value)
});
// 卸载组件实例后调⽤。调⽤此钩⼦时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有⼦组件实例被卸载。
onUnmounted(()=>{
console.log('onUnmounted组件卸载完成后执⾏的函数', test.value)
});
// 当捕获⼀个来⾃⼦孙组件的错误时被调⽤
onErrorCaptured(()=>{
console.log('onErrorCaptured当捕获⼀个来⾃⼦孙组件的错误时被调⽤', test.value)
});
/
/ onRenderTracked和onRenderTriggered是⽤来调试的，这两个事件都带有⼀个DebuggerEvent，它使我们能够知道是什么导致了Vue实例中的重新渲染。。
onRenderTracked(()=>{
console.log('onRenderTracked跟踪虚拟 DOM 重新渲染时调⽤', test.value)
});
onRenderTriggered(()=>{
console.log('onRenderTriggered当虚拟 DOM 重新渲染', test.value)
});
return{test};
}
}
#demo使⽤各依赖版本
{
"name":"vue3-typescript",
"version":"0.1.0",
"private":true,
"scripts":{
"serve":"vue-cli-service serve",
"build":"vue-cli-service build"
},
"dependencies":{
"axios":"^0.21.1",
"core-js":"^3.6.5",
"element-plus":"^1.2.0-beta.6",
"vue":"^3.0.0",
"vue-router":"^4.0.0-0",
"vuex":"^4.0.0-0"
},
"devDependencies":{
"@types/node":"^17.0.0",
"@types/webpack-env":"^1.16.3",
"@vue/cli-plugin-babel":"~4.5.0",
"@vue/cli-plugin-router":"~4.5.0",
"@vue/cli-plugin-typescript":"~4.5.0",
"@vue/cli-plugin-vuex":"~4.5.0",
"@vue/cli-service":"~4.5.0",
"@vue/compiler-sfc":"^3.0.0",
"image-webpack-loader":"^7.0.1",
"less":"^3.0.4",
"less-loader":"^5.0.0",
"typescript":"~4.1.5",
"vuex-module-decorators":"^1.0.1"
}
}
#vue3+typescript+element-plus
PS：搭建项⽬就不赘述了，⽹上好多很好的⽂章。
⼤佬⽂章:
typescript的特性就是类型检测以及interface接⼝，既然决定使⽤typescript那么就要⽤，尽量不⽤any；可以定义⼀个全局的interface接⼝，按需引⼊就可以。
//在src⽬录下建⼀个types⽬录创建⼀个store.ts
export interface TestObject {
name:string,
value:number
}
//在需要使⽤interface 接⼝.vue⽂件或者.ts⽂件引⼊
//以.vue⽂件举例
import{ defineComponent, reactive}from'vue';
import{ TestObject }from'@/types/store';//引⼊类型
interface dataType {//定义setup reactive中的数据类型
testData:Array<TestObject>,//设置数组<；对象>类型
}
export default defineComponent({
setup(){
const data:dataType =reactive({
testData:[
{ name:'测试', value:0}
]
})
}
}）
以上是在vue3中typescript基本使⽤
element-plus是⼀个⽀持vue3.x的UI框架
//全局引⼊与按需引⼊element-plus
//main.ts
import{ createApp }from'vue'
import App from'./App.vue'
...
import ElementPlus from'element-plus';
//import { ElButton } from 'element-plus'; //按需导⼊
import'element-plus/dist/index.css'
//element-plus默认是英⽂，需要⾃⼰配置中⽂
import locale from'element-plus/es/locale/lang/zh-cn'
const app =createApp(App);
//注册组件
//appponent('ElButton',ElButton)
...
app.use(ElementPlus,{ size:'small', zIndex:3000, locale });
#vue3+typescript router
vue2与vue3中router还是有点区别的，尤其是加上typescript；
在main.ts中引⼊与注册我就不过多赘述了，主要说⼀下router的基础配置吧。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论