Composition API介绍
2020-05-30 本文已影响0人
疯狂的枫叶
Composition API
Composition API介绍
Composition API字面意思是组合API，它是为了实现基于函数的逻辑复用机制而产生的。
调试环境搭建
方案一：
- 迁出Vue3源码：
git clone https://github.com/vuejs/vue-next.git - 安装依赖： yarn
- 生成sourcemap文件，package.json
"dev": "node scripts/dev.js --sourcemap"
- 编译： yarn dev
生成结果：packages\vue\dist\vue.global.js
方案二：
在head标签中引入以下
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0-beta.14/dist/vue.global.js"></script>
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hello vue3</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0-beta.14/dist/vue.global.js"></script>
<!-- <script src="../dist/vue.global.js"></script> -->
</head>
<body>
hello vue3
<div id='app'>
<h2>{{state.count}}--{{count2}}---{{state.doubleCount}}</h2>
<div @click="add">count: {{ state.count }}</div>
<div @click="add2">count: {{ count2 }}</div>
</div>
<script>
const { createApp, reactive, ref, computed, watch } = Vue
// reactive: 接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 Vue.observable()
// ref: 接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。
// computed: 传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象。
// watch API 完全等效于 2.x this.$watch （以及 watch 中相应的选项）。watch 需要侦听特定的数据源，并在回调函数中执行副作用。默认情况是懒执行的，也就是说仅在侦听的源变更时才执行回调。
const App = {
// setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。
// 调用时刻是初始化属性props确定后，beforeCreate之前
setup() {
const count2 = ref(1)
// 响应化：接收一个对象，返回一个响应式的代理对象
const state = reactive({
count: 1,
// computed()返回一个不可变的响应式引用对象
// 它封装了getter的返回值
doubleCount: computed(() => state.count * 2)
})
watch(
() => state.count,
(count, prevCount) => {
/* ... */
console.log('state.count', count, prevCount);
}
)
watch(count2, (count, prevCount) => {
/* ... */
console.log('count2', count, prevCount);
})
function add() {
state.count++
}
function add2() {
count2.value++
}
// 返回对象将和渲染函数上下文合并
return { count2, state, add, add2 }
}
}
createApp(App).mount('#app')
</script>
</body>
</html>
简单demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hello vue3</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0-beta.14/dist/vue.global.js"></script>
<!-- <script src="../dist/vue.global.js"></script> -->
</head>
<body>
hello vue3
<div id='app'></div>
<script>
const { createApp, reactive, onMounted, onUnmounted, toRefs } = Vue;
// 鼠标位置侦听
function useMouse() {
const state = reactive({ x: 0, y: 0 })
const update = e => {
state.x = e.pageX
state.y = e.pageY
}
onMounted(() => {
window.addEventListener('mousemove', update)
})
onUnmounted(() => {
window.removeEventListener('mousemove', update)
})
// 转换所有key为响应式数据
return toRefs(state)
}
// 事件监测
function useTime() {
const state = reactive({ time: new Date() })
onMounted(() => {
setInterval(() => {
state.time = new Date()
}, 1000)
})
return toRefs(state)
}
// 逻辑组合
const MyComp = {
template: `
<div>x: {{ x }} y: {{ y }}</div>
<p>time: {{time}}</p>
`,
setup() {
// 使用鼠标逻辑
const { x, y } = useMouse()
// 使用时间逻辑
const { time } = useTime()
// 返回使用
return { x, y, time }
}
}
createApp(MyComp).mount('#app')
</script>
</body>
</html>
参考链接：
官方文档：
composition api
其他文档：
