vue.js 3.0 Bate 详解【持续更新】
前段时间尤大在b站进行了vue.js 3.0 Bate的直播
下面这篇文章就配合示例来分析，带大家一起看一下vue3.0具体都发生了哪些改变
如有不全错误之处，还请大家多多指教包涵，下方留言或私信我及时改正，谢谢~
那么我们就开始吧~
vue3.0的优越之处
- 设计动机、核心优势 没有this，没有烦恼 更好的类型推导能力（TypeScript） 更友好的Tree-Shaking 支持（渐进式体验）
- vue2.0是 import Vue from ‘vue’ 【引入一个Vue对象，webpack默认对象中的所有成员都用到了，既然都用到了，所以Tree-Shaking是不能把不用的东西摇掉的】
- 3.0是一个功能对应一个函数【需要什么引什么，这样打包的时候，那些没用到的功能就会被摇掉】 webpack打包的时候，是做词法分析，只要检测这个api有没有被外界用到，没被用到的api和组件不会被加载，只要检测当前方法有没有被使用
- vue3.0更大的代码压缩空间，打包工具在打包的时候，会给成员变量重命名，3.0相当于使用的成员变量，导出的是成员名称，成员名称会被压缩为更简短的，2.0则不可以，因为2.0所用到的相当于对象中的属性，属性名是不可以被压缩的
- 3.0按需引入api，也就是所说的Composition API ，2.0是引入Vue对象optionsAPI
- 更灵活的逻辑复用能力，3.0可以将相关功能的代码都放在一起，所有的东西都是以函数的方式，以hook的方式挂载进去的 Tree-Shaking
- 基于webpack构建，webpack开启production会自动开启一些优化功能比如tree-shaking等development则会让开发环境更加方便
下面我们来看一些具体的代码
第一部分 Composition API 3.0 【optionsAPI 2.0】
- 3.0 使用setup最后return一个对象出去，对象内成员可在全页面使用
- 如果需要数据具有响应能力，则需要使用reactiveAPI
- reactiveAPI：将普通的对象包装成es6中proxy对象（响应式对象）
- 监听一个数据的变化：watchEffect
creatApp({
setup:() {
//3.0当中将会使用state，页面中你将几乎不会看到this的出现
const state = reactive({
todos:storage.get(),
input:'',
visibility:'all'
})
function addTodo () {
//state 在方法中的使用
const text = state.input && state.input.trim()
...
}
watchEffect( () => { //页面监听
storage.set(state.todos)
})
onMounted(() => { //页面加载
addTodo()
})
onUnmounted(() => { //页面卸载
...
})
function onHashChange() {
...
}
function removeTodo(todo) {
...
}
return { //setup函数，最后返回一个对象，用于全页面使用
state,
addTodo
}
}
})
示例一：控制显示隐藏
// 2.0写法
creatApp({
data: () => ({
show:false
}),
methods: {
toggle () {
this.show = !this.show
}
}
})
// 3.0写法
setup () { //使用
const { on, toggle } = useToogle(false)
return { on, toggle }
}
import { ref } from 'vue'
//ref 是把普通的值包装成一个对象，对象传递是引用传递
const useToggle = (initialState = false) => {
const on = ref(initialState)
const toggle = value => {
on.value = typeof value === 'undefined' ? !on.value : value
}
return { on, togge }
}
示例二：多组件中都需要用到同一个数据查询
//使用
const user = useUsers()
import { ref, onMounted } from 'vue'
const useUsers = (query) => {
const users = ref([])
onMounted(async () => {
this.users = await UserService.fetch(query)
})
return { users }
}
示例三：获取窗口大小的函数
import { ref, onMounted, onUnmounted } from 'vue'
const useWindowSize = () => {
const width = ref(window.innerWidth)
const height = ref(window.innerHeight)
const update = e => {
width.value = window.innerWidth
height.value = window.innerHeight
}
onMounted(() => window.addEventListenner('resize', update))
onUnmounted(() => window.removeEventListener('resize', update))
return { width, height }
}
下面一段代码复制粘贴到你的html文件中，就可以体验一下vue3.0 啦
记得开F12(＾Ｕ＾)ノ~ＹＯ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://s1.zhuanstatic.com/common/js/vue-next-3.0.0-alpha.0.js"></script>
</head>
<body>
<div id='app'></div>
</body>
<script>
const { createApp, reactive, computed, effect } = Vue;
const Demo = {
template: `
`,
setup() {
const state = reactive({
name: 'Shier',
time: '1',
learnTime: computed(() => state.time * 1)
})
effect(() => {
console.log(`触发effect，毕业${state.time}年了`)
})
function testFun() {
state.time++
}
return {
state,
testFun
}
}
}
createApp().mount(Demo, '#app')
</script>
</html>
感谢阅览，如有问题请及时留言私信我~