宏伟的事业,是靠实实在在的微不足道的一步步的积累,获得的。
前言
虽然vue3还没有正式发版&＃xff0c;但是各大培训机构均把它作为一个"噱头"&＃xff0c;来吸引流量。相比vue2&＃xff0c;写法有一个很大变动&＃xff0c;也越来越符合"解藕"的思想。目前在vue3的使用方面有两种方式&＃xff1a;
没有this
在之前vue2&＃xff0c;this的指向是难以琢磨的&＃xff0c;而且有诸多限制&＃xff0c;如下&＃xff1a;
export default {data() {return {title: "foo",}},methods: {//title&＃xff1a;"foo"getTitle() {this.title &＃61; "";//这里的this不应该是methods这个对象吗}}
}
而在vue3中&＃xff0c;抛弃了"this"这个难以理解的概念。直接用声明式的函数来实现数据响应。
vue3通过setup函数取代vue2中的date函数&＃xff0c;返回一个对象暴露给模版&＃xff0c;我们一切的响应式操作都在setup函数中实现。
import { defineComponent, ref } from "vue";
export default defineComponent({setup() {const title &＃61; ref("vue3");console.log(count);// {// value: "vue3",// __v_isRef: true// }return {title,};},
});
更好的tree-shaking支持
Tree-shaking较早由Rich_Harris的rollup实现&＃xff0c;后来&＃xff0c;webpack也增加了tree-shaking功能。中文翻译过来是"树摇"&＃xff0c;摇树&＃xff0c;树上没有生命的叶子就会掉落下来&＃xff0c;简单的理解就是去除"无用的东西"。
为什么说vue3对此功能有更好的支持&＃xff0c;重点就在"按需加载"这四个字上&＃xff0c;在Vue3中&＃xff0c;我们用到的函数可以通过import声明。而在vue2中我们直接导出的是整个vue实例&＃xff0c;如果我们只是简单的用某一些功能的话就有点累赘。这其实也说明来一个未来框架必不缺少的一个能力就是"解藕"。
import {ref,reactive,defineComponent,onMounted,computed
} from "vue";
//更好的tree-shaking支持
tree-shaking有一个两个要求&＃xff1a;
一个是必须是import导入。
另一个是必须是单个函数或常量导出。
如果导出的是一个对象&＃xff0c;那也无法用tree-shaking。
export const add&＃61;()&＃61;>{//...
}
export const handleClick&＃61;()&＃61;>{//...
}
//不要这样导出
export default {add,handleClick
}
webpack中需要开启&＃xff1a;
optimization: {usedExports: true, //用到使用minimize: true, //压缩
},
数据的不可逆性
这里讲到了引用类型&＃xff0c;如下&＃xff1a;
以上代码中&＃xff0c;页面数据会跟着变吗&＃xff1f;不会&＃xff0c;虽然打印出来的obj中的count会变化&＃xff0c;但是在vue3中它是不可变的&＃xff0c;想要变化&＃xff0c;使用vue3提供的ref或reactive。
这样做的意义是为了防止原数据被意外的改变&＃xff0c;可以想想vue2中this&＃xff0c;如果用this来实现响应式&＃xff0c;那么很容易出现的问题就是我可以通过this改变vue实例下的任意数据。
所以vue3数据的响应其实就是拷贝来一份数据来实现页面数据更新。
setup() {let count &＃61; ref(0);//常用来响应基本数据类型const state &＃61; reactive({title: "Hello,Vue.js 3.0!",});//常用来响应引用数据类型return {count,state,//...};
}
组件传值
还有一个明显的变化就是父子组件的传值&＃xff0c;通过参数的形式。
//父组件
通过setup的参数prop、SetupContext实现父子组件通信。
//子组件export default {props: {text: String,},setup(props, { emit }) {const onClick &＃61; () &＃61;> {emit("outClick", Date.now());};return {props,onClick,};},
}
生命周期钩子函数和computed等也写在setup函数中。
import {ref,reactive,defineComponent,onMounted,computed
} from "vue";
export default defineComponent({setup() {let count &＃61; ref(0);// Vue2.x 中的 mounted 生命周期函数onMounted(() &＃61;> {console.log("mounted");});// 计算属性const zerosCount &＃61; computed(() &＃61;> {return new Array(10000).fill("").map((value, index) &＃61;> index &＃43; 1).join("").match(/0/g).length;});return {count,zerosCount,};},
})
逻辑复用
在项目中&＃xff0c;我们可能会抽出一些共用的功能单元来通过mixin来注入。这样会导致一些问题&＃xff0c;比如原数据不透明&＃xff0c;模版中的一些响应式数据&＃xff0c;找不到声明。
在vue3中我们可以通过解构赋值的方式显式的声明数据。如下mixin混入
// mixin混入文件
import {ref,onMounted,onUnmounted
} from "vue";
export default () &＃61;> {const width &＃61; ref(window.innerWidth);const height &＃61; ref(window.innerHeight);const update &＃61; (e) &＃61;> {width.value &＃61; window.innerWidth;height.value &＃61; window.innerHeight;};onMounted(() &＃61;> {window.addEventListener("resize", update);});onUnmounted(() &＃61;> {window.removeEventListener("resize", update);});return { width, height};
}
这样写&＃xff0c;就可以明确知道原数据的出处。
import { defineComponent, ref } from "vue";
import windowSize from "../mixin.js";
export default defineComponent({
setup() {
const count &＃61; ref(0);
const {
width &＃61; window.innerWidth,
height
} &＃61; windowSize();
return {
count,
width,
height,
//...
};
},
});
❤️爱心三连击1.看到这里了就点个在看支持下吧&＃xff0c;你的「点赞&＃xff0c;在看」是我创作的动力。
2.关注公众号程序员成长指北&＃xff0c;回复「1」加入Node进阶交流群&＃xff01;「在这里有好多 Node 开发者&＃xff0c;会讨论 Node 知识&＃xff0c;互相学习」&＃xff01;
3.也可添加微信【ikoala520】&＃xff0c;一起成长。“在看转发”是最大的支持
京公网安备 11010802041100号