3月总结

Vue2.x 和vue3.x的语法区别

vue2.x使用*import Vue from 'vue'*，然后使用new Vue()创建实例。vue3.x则是*import {createApp} from 'vue'*，通过createApp()来创建实例了。

image.png

Router.js创建路由

Vue3.x需要引入createRouter创建地址路由。

createWebHashHistory对应之前的hash，createWebHistory对应之前的history。

image.png

Vuex状态管理

堆栈内容

深拷贝和浅拷贝

深拷贝的方法：

一、 逐个去拿到简单数据项（网上可以搜到递归解决，思路类似)

let obj = {name:'fiona-SUN'}; letcopyFunc = (originObj) =>{ letcopyObj = {}; for(letkey in originObj){ copyObj[key] = originObj[key]; } returncopyObj; }; letcopyObj = copyFunc(obj); copyObj.name = 'fiona'; console.log(copyObj.name); // 'fiona' console.log(obj.name); // 'fiona-SUN'

· 二、方法二：通过JSON去解析

et obj = {name:'fiona-SUN'}; letcopyObj = JSON.parse(JSON.stringify(obj)); copyObj.name = 'fiona'; console.log(copyObj.name); // 'fiona' console.log(obj.name); // 'fiona-SUN'

· 方法三：es6之展开Object.assign（拷贝obj的内容到一个新的堆内存，copyObj存储新内存的引用）

let obj = {name:'fiona-SUN'}; letcopyObj = Object.assign({}, obj); copyObj.name = 'fiona'; console.log(copyObj.name); // 'fiona' console.log(obj.name); // 'fiona-SUN'```

· 方法四：es6之展开运算符（仅用于数组）

let arr = [1,2,3]; let copyArr = [...obj]; copyArr[2] = 0; console.log(copyArr[2]); // 0 console.log(arr[2]); // 2```

计算属性设置值

想要改变计算属性的值，要通过set方法去触发它所依赖的变量，（类似于触发它重新计算，单纯赋予一个新值，在取的时候也是不会被改变的）

v-for优先于v-if

事件名推荐使用kebab-case 因为事件绑定，会统一把大写变成小写

Prop值的改变，不是立即

如果父组件，传递prop，

可以监听值改变取调用子组件的方法

将子组件相关方法的调用放在nextTick里面

this.$forceUpdate****强制刷新

如何优化spa应用的首屏加载缓慢的问题

在配置路由的时候，页面和组件使用懒加载的方式引入，进一步缩小应用程序包的app.bundel体积，在调用某个组件的时候再去调用对应的js文件

加一个loading图，提升用户体验。