据 vue 作者尤雨溪去年发布的 vue 3.0 正式版本发布以来一直没时间看，今天就来体验一下vue 3.0 。围绕右大大最新发布的 vue-compisition-api，来讲解大家最关心的、同时也是 vue 3.0 最重要的一些新特性，例如 setup() 函数、reactive()、ref() 等这些 Vue Hooks。
一、首先你要有一定的基础
1.了解常见的 ES6 新特性
ES6 的导入导出语法、解构赋值、箭头函数等等...
2.了解 vue 2.x 的基本使用
组件使用、常用的指令、生命周期函数、computed、watch、ref 等...
二、setup() 函数
setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。
setup 函数会在 beforeCreate 之后、created 之前执行、接收props
1.在 props 中定义当前组件允许外界传递过来的参数名称：props: { p1: String}
2.通过 setup 函数的第一个形参，接收 props 数据：setup(props) { console.log(props.p1)}
注⚠️:在 setup() 函数中无法访问到 this
三、 reactive
reactive()函数接收一个普通对象，返回一个响应式的数据对象
setup() { const state = reactive({count: 0}) // setup 函数中将响应式数据对象 return 出去，
供 template 使用 return state
}
四、ref
ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性：
// 创建响应式数据对象 num，初始值为 0
const num = ref(0)// 如果要访问 ref() 创建出来的响应式数据对象的值，必须通过 .value 属性才可以console.log(num.value) // 输出 0// 让 num 的值 +1 num.value++// 再次打印 num 的值console.log(num.value) // 输出 1
五、isRef
isRef() 用来判断某个值是否为 ref() 创建出来的对象；应用场景：当需要展开某个可能为 ref() 创建出来的值的时候，例如：
import { isRef } from '@vue/composition-api'
const boolean = isRef(type) ? type.value : type
六、 toRef
toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据，如下：
import { toRefs } from '@vue/composition-api'
setup() { // 定义响应式数据对象
const state = reactive({ count: 0 }) // 定义页面上可用的事件处理函数
const increment = () => { state.count++ } // 在 setup 中返回一个对象供页面使用 // 这个对象中可以包含响应式的数据，也可以包含事件处理函数
return { // 将 state 上的每个属性，都转化为 ref 形式的响应式数据 ...toRefs(state), // 自增的事件处理函数 increment
}
}
七、computed
computed() 用来创建计算属性，computed() 函数的返回值是一个 ref 的实例。使用 computed 之前需要按需导入,如下:
// 创建一个 ref 响应式数据
const count = ref(0) // 根据 count 的值，创建一个响应式的计算属性 add// 它会根据依赖的 ref 自动计算并返回一个新的 ref
const add = computed(() => count.value + 1)
console.log(add.value) // 输出 2
add.value++ //报错 error
八、watch
1.watch() 函数用来监视某些数据项的变化，从而触发某些特定的操作，使用之前需要按需导入：
import { watch } from '@vue/composition-api'
const count = ref(0)
/ /定义 watch，只要 count 值变化，就会触发 watch 回调
// watch 会在创建时会自动调用一次
watch(() => console.log(count.value))// 输出 0
setTimeout(() => { count.value++ // 输出 1}, 1000)
2.监听多个数据源
const state = reactive({ count: 0, name: 'aaaa' })
watch( [() => state.count, () => state.name], // Object.values(toRefs(state)),
([count,name],[prevCount,prevName]) => { console.log(count) // 新的 count 值
console.log(name) // 新的 name 值
console.log(prevCount) // 旧的 count 值
console.log(prevName) // 新的 name 值 },
{ lazy: true // 在 watch 被创建的时候，不执行回调函数中的代码
})
setTimeout(() => { state.count++ state.name = 'ls'}, 1000)
好了,就先撸到这里吧.还有很多新到特效可以参考官网
例如:瞬间移动组件
异步组件
简单的总结2句吧:
vue3.0 六大亮点
1.性能比2.0提升快1.2-2倍
2.按需编译,体积比2.0更小了
3.组合大api
4.更好的ts支持
5.暴露自定义渲染api
6.更先进的组件
那么右大大是怎么让如何变快的呢????
1.diff方法的优化
2.histsatis 静态提升
3.cacheHandlers事件侦探器缓存
4.ssr服务端渲染