2024-12-10 vue3(day1)

95 阅读1分钟

image.png

image.png

image.png 创建vue3项目

image.png

setup的执行时机在beforeCreate前面

setup中的this是undefined

vue2写法data(){}中可以读取setup中的变量,但是setup中无法读取vue2写法data(){}中的变量

但是一般不建议vue2写法和vue3写法混用

image.png

setup语法糖

image.png

image.png

如果不借助export default里面的name给组件取名字,我们可以借助插件这样写

image.png

image.png

image.png

reactive的响应式对象不能直接赋值,会失去响应式。我们可以借助Object.assign()来进行对象的整体修改。 但是使用ref()的.value不会有这样的问题

image.png

image.png 直接对响应式对象解构是会失去响应式的,可以通过toRefs()对reactive对象进行包裹再解构,这样解构出来的东西是响应式的

image.png toRefs()可以让对象中所有的属性解构出来,响应式仍然存在

toRef()可以让对象中某个属性单拿出来,响应式仍然存在

image.png

计算属性computed可对上一次计算的结果进行缓存

image.png