Vue3.0体验 002
1.初始化项目
- 安装vue-cli3
npm install -g @vue/cli - 创建项目
vue create my-project - 项目中安装 composition-api
npm install @vue/composition-api --save - 在
main.js中通过 Vue.use() 进行安装 composition-api
import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)
2.setup
setup 函数会在 beforeCreate 之后、created 之前执行
setup有两个参数 setup(props,content){}
- props 外接传过来的参数
- content 上下文对象，类似于this,可以调用很多vue2.0需要通过this访问的属性，类似于
context.attrs、context.emit、context.refs...，所以setup里面不能用this
setup优点:
原本一个组件我们要声明data()、methods、created、mounted、wathch...一系列option，现在的操作只用在setup内部，更加简洁，功能模块把状态和方法等划分在一起，更利于模块化。我们就不需要每建立一个，要重新写各种option一遍。
3.ref && reactive
- ref ref() 函数用来根据给定的值创建一个响应式的数据对象
const count = ref(0),通过count.value来获取值 - reactive 创建响应式的数据对象, reactive的返回值类似于vue2.0的data()返回的响应式对象
const state = reactive({ count: 0 }),通过state.count来获取值
ref和reactive都是创建响应式，那为什么要有两种方式创建呢？ vue的团队是为了使api适用于不同的开发风格。举个例子参数声明(var x = 1,y=2 ) 和（var state = {x:1,y:2}），第一种直接声明是ref的方式，第二种用个对象存储是reactive的方式。
注意！ reative定义的state，如果用了展开运算符…，展开之后就不再是响应了, 可以用…toRefs(state)的形式 转成ref
4.isRef & toRefs
isRef()用来判断某个值是否为 ref() 创建出来的对象
toRefs() 函数可以将 reactive()创建的响应式对象转化成ref创建的，这个函数的主要应用场景：
setup() {
// 定义响应式数据对象
const state = reactive({
count: 0
}) // reative创建的响应式
const _ref = ref(1) // ref创建的响应式
return {
// 将 state 上的每个属性，都转化为 ref 形式的响应式数据
...toRefs(state),
_ref
}
}
为什么要这样做呢？ 因为reactive()创建的响应对象只能通过return state出去,而不能以展开对象{state}的方式出去。所以有多个要return的响应式对象时，就需要这个函数。所以一般建议直接用ref，简洁明了
5. computed & watch
vue3.0的computed和watch都是放在setup函数里面，通过声明的方式来创建。
- computed
setup(){
const count = ref(1)
const countAdd = computed(() => count.value + 1)
return{
count,
countAdd
}
}
- watch
const count = ref(1)
watch(() => console.log(count.value))
6. lifeCycle Hooks
beforeCreate-> use setup()created-> use setup()- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
添加了两个新的调试钩子
- onRenderTracked
- onRenderTriggered
export default {
onRenderTriggered(e) {
debugger
// inspect which dependency is causing the component to re-render
}
}
7.provide & inject
provide() 和 inject() 可以实现嵌套组件之间的数据传递。这两个函数只能在 setup()函数中使用。父级组件中使用provide() 函数向下传递数据；子级组件中使用 inject()获取上层传递过来的数据。
父组件：
setup() {
const conut = ref(1)
provide('count', count) // 传递给子组件count=1
},
子组件:
setup() {
const count = inject('count') // 1
},
