据 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)


好了,就先撸到这里吧.还有很多新到特效可以参考官网
例如:瞬间移动组件 <teleport/>
        异步组件 <suspense/>等

简单的总结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服务端渲染