vuejs3 备忘
source link: https://blog.kelu.org/tech/2022/05/09/vue3.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
上一篇记录了vue2的一些备忘,这一篇记录vue3和2的不同的地方。
2020.09.18发布vuejs 3.0.0,代号 one piece。官网:https://v3.cn.vuejs.org/
官方针对版本3的说明:https://github.com/vuejs/core/releases/tag/v3.0.0
一、更新内容
- 源码升级
- tree-shaking
- 更好支持TS
- 新特性
- composition API
配置下代理,备忘
npm init npm config set proxy http://10.101.1.1:8118 npm config set https-proxy http://10.101.1.1:8118 npm i -S vue
-
vue-cli
4.5.0版本以上
npm install -g @vue/cli # 安装/升级 vue create xxx cd xxx npm run serve
-
想代替 webpack,由vue团队打造的打包工具。
npm init vite@latest npm init vite-app my-vue-app npm init vite@latest my-vue-app -- --template vue cd my-vue-app npm install npm run dev
-
代码结构对比
Vue2:
vue3:
createApp 工厂函数,返回的app对象比vm更轻
-
setup方法
-
组件中的数据、方法都要配置到setup中(不需要往props和data、func里塞了)。
创建独立的响应式值作为
refs
。watch只能监听ref的基本类型,要监听对象就用reactive。
watchEffect
也不错,但是感觉会影响性能?ref类似vue2中get和set来实现响应式。
reactive是vue3中新增的proxy实例对象来实现响应式,搭配toRefs实现。
<template> <div> <span>8</span> <button @click="count ++">Increment count</button> <button @click="nested.count.value ++">Nested Increment count</button> </div> </template> <script> import { ref } from 'vue' export default { setup() { const count = ref(0) return { count, nested: { count } } } } </script>
当
ref
作为响应式对象的 property 被访问或更改时,为使其行为类似于普通 property,它会自动解包内部值.使用解构的两个 property 的响应性都会丢失。对于这种情况,我们需要将我们的响应式对象转换为一组 ref。这些 ref 将保留与源对象的响应式关联。
import { reactive, toRefs } from 'vue' const book = reactive({ author: 'Vue Team', year: '2020', title: 'Vue 3 Guide', description: 'You are reading this book right now ;)', price: 'free' }) let { author, title } = toRefs(book) title.value = 'Vue 3 Detailed Guide' // 我们需要使用 .value 作为标题,现在是 ref console.log(book.title) // 'Vue 3 Detailed Guide'
-
compute
vue3里可以按照vue2的compute使用。不过我们现在搞到setup里了。
只读computed,接受一个 getter 函数,并根据 getter 的返回值返回一个不可变的响应式 ref 对象。
const count = ref(1) const plusOne = computed(() => count.value + 1) console.log(plusOne.value) // 2
读写computed
const count = ref(1) const plusOne = computed({ get: () => count.value + 1, set: val => { count.value = val - 1 } }) plusOne.value = 1 console.log(count.value) // 0
-
可以通过直接导入
onX
函数来注册生命周期钩子:import { onMounted, onUpdated, onUnmounted } from 'vue' const MyComponent = { setup() { onMounted(() => { console.log('mounted!') }) onUpdated(() => { console.log('updated!') }) onUnmounted(() => { console.log('unmounted!') }) } }
-
自定义hook
一般放在hook文件夹里,感觉很不错啊,这种引用方式。
-
其它composition api
- readonly
- shallowReadonly
- toRaw
- markRaw
- customRef,注意防抖~
- provide和inject,祖孙组件通信。无论组件层次结构有多深,父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分:父组件有一个
provide
选项来提供数据,子组件有一个inject
选项来开始使用这些数据。 - isRef,isReacrive,isReadonly,isProxy
-
composition api的优势
就我个人感觉,更像后端的一个class,定义变量和方法都在setup里,改起来舒服。
配合hook使用就起飞🛫️。
-
fragment
-
用来UI定位的,舒服舒服,直接把内容传送到任意一个元素去。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK