vue 3.0 pre-alpha
vue 3.0 pre-alpha
vue 3.0
一个月前尤大大公布了 vue 3.0 的源码，目前还是 pre-alpha 状态，预计年后会发布正式版本。听到这个消息的第一反应是学习好累呀，在知乎上瞄了一眼尤大大对功能简单的介绍，感觉难，直接放弃了学习。 冷静了一段时间之后，认真的看了看，好像也不是很难。慢慢学，慢慢看，不着急。慢一点或许到达的更好一点
vue 2.0 和 vue 3.0
最初接触 vue 2.0 是18年年初，那时候在做毕业设计，三大框架选了用 vue，如今两年过去了迎来了 3.0 的版本。对比另外的两个框架，发现 vue 更新已经很慢了，两年才发一个大版本。
在 vue 3.0 听到了一些概念，组件 API, Proxy ,Reflect,Hooks,我是被这个概念吓到了，没听过的东西太多慌了，然后就一直一直没有去学习。回味一下自己的生活和工作又何尝不是呢？ 遇事第一反应就是想逃避，既然都逃不掉，那就静下来慢慢思考，慢一点，别着急。着急解决不了任何问题，有时候会得不偿失
vue 3.0 视频介绍
什么是 Hooks ？
搜罗了网上关于 3.0 的介绍，学习了，我想起了 react ，那个里面有好多关于 Hooks 是什么，去我在 react 中寻找答案。
React Hooks 的设计目的，就是加强版函数组件，完全不使用"类"，就能写出一个全功能的组件。因为组件的最佳写法应该是函数，而不是类。
React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。
简单粗暴理解一句话说 Hooks 就是函数，需要外部提供一些方法或者属性，就通过 es6 的 import 进行引入。
像我一个粗熟的人，就直接理解成 vue 就是一个 js 文件，需要什么，就引入什么，不引入就没有对应的方法。默认不支持引入所有，因为引入不使用，是一种资源浪费
参考
Hook 简介
React Hooks 入门教程
组件 API
说完了 Hooks ，组件 API 的概念也出来了。因为 vue 全局使用了一个 setup 作为入口，我们需要什么方法属性，就从 vue 中引入，而不是默认引用所有的。多个方法进行组合使用，最终只导出一个方法。
联想我们经常和接口对接 api ，差不多就是一样的
组件 API：一个组件就是一个 API
Vue 3 中令人兴奋的新功能
Reflect 和 Proxy
Reflect 就是升级版的对象，拥有很多对象的方法，但是他并不是一个函数对象，也不可构造。
let obj = {
assign:"sunseeker"
}
// 对象删除属性
delete obj.assign
// Reflect 删除属性
Reflect.deleteProperty(obj, assign)
// 对象是否包含某属性
'assign' in Object // true
// Reflect 是否包含某属性
Reflect.has(Object, 'assign') // true
复制代码或许是心理作用，总觉得 Reflect 操作要安心一些，像极了函数。对象的直接操作像极了命令式
还有其他的
Reflect.get()
Reflect.set()
Reflect.has()
Reflect.deleteProperty()
复制代码相当于原来对象的方法的 get set in delect 方法，相对比之前更加像函数，灵活性也得到了扩充。使用起来也更加方便了。
使用场景：vue 3.0
vue 3.0 用 Proxy 结合 Reflect 做到响应性监听，解决了以前没有在 data 监听的对象不能响应式，某些情况下不能监听数组变化等等。都是 es6 的属性
// 使用 Reflect
let data = [1,2,3]
let p = new Proxy(data, {
get(target, key, receiver) {
console.log('get value:', key)
return Reflect.get(target, key, receiver)
},
set(target, key, value, receiver) {
console.log('set value:', key, value)
return Reflect.set(target, key, value, receiver)
}
})
p.push(1)
// 不使用 Reflect,必须在 set 的时候有return ，否则会报错
let data = [1,2,3]
let p = new Proxy(data, {
get(target, key, receiver) {
console.log('get value:', key)
return target[key]
},
set(target, key, value, receiver) {
console.log('set value:', key, value)
return target[key] = value
}
})
p.push(1)
复制代码MDN文档
ECMAScript 6 入门
Vue3 中的数据侦测
vue 3.0 简单语法介绍
reactive(): 转换响应式对象
ref(): 转换原始类型为响应式对象
两者的区别
reactive 代理初始化一个对象，ref 只是一个 .value 值，在函数中使用都要一直使用 .value 引着
<template>
<button @click="increment">
Count is: {{ state.count }}, double is: {{ state.double }}
</button>
</template>
<script>
import { reactive, computed } from 'vue'
export default {
setup() {
const state = reactive({
count: 0,
double: computed(() => state.count * 2)
})
function increment() {
state.count++
}
return {
state,
increment
}
}
}
</script>
复制代码reactive 类似于原来的 data，比原来还多一个可以使用 computed 属性
import { ref, watch } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
const renderContext = {
count,
increment
}
watch(() => {
renderTemplate(
`<button @click="increment">{{ count }}</button>`,
renderContext
)
})
复制代码和前面的对比发现 reactive 和 ref 的不同点在于，引用的是对象还是一个单个的值，如果是单个的值，在方法的使用的时候要带上 .value ，渲染到 html 上面就不需要了，vue 做了一层处理。
demo 地址
参考
Composition API RFC
精读《Vue3.0 Function API》
Vue3 对 Web 应用性能的改进
vue 3.0 语法持续更新
原文链接