下载 vue-next
- github 中下载
- 安装依赖：yarn or npm install
- yarn dev 生成
packages\vue\dist\vue.global.js文件
复制出这个文件，就可以开始体验了
setup
setup Composition API的入口点
在beforeCreate挂接之前被调用
返回一个对象，则该对象上的属性将合并到组件模板的渲染上下文中（类似2.0中proxy(vm,_data, key)）
还可以返回一个render函数
参数
后续更新
返回值
setup() {
const count = ref(0)
const object = reactive({ foo: 'bar' })
return {
count,
object
}
or
return () => h('div', [object .foo, count .value])
}
reactive
响应式数据
类似之前的 data
<div id="app">
<span>{{ state.count }}</span>
</div>
const { reactive, createApp } = Vue
// 创建、挂载
createApp({
const state = reactive({
count: 0
})
setup: () => {
return {
state
}
}
}).mount('#app')
运行结果
watchEffect
类似于 watch
当依赖的数据发生变化时，执行该方法
会自动运行一次
<div id="app">
<span>{{ state.count }}</span>
<br />
<p id="print"></p>
<button @click='handleAdd'>Add</button>
</div>
const { reactive, createApp, watchEffect, computed } = Vue
// 创建、挂载
createApp({
// 响应式数据
// 类似之前的 data
const state = reactive({
count: 0
})
// 类似于 watch
// 当依赖的数据发生变化时，执行该方法
// 会自动运行一次
watchEffect(() => {
console.log('watchEffct')
document.querySelector('#print').innerHTML = `count is ${state.count}`
})
// // 监听多个
const stop = watchEffect(() => {
console.log(`count is ${state.count}`)
})
setup: () => {
return {
state,
// method
handleAdd: () => {
state.count++
if (state.count === 3) stop()
}
}
}
}).mount('#app')
运行结果
computed
<div id="app">
<span>{{ state.count }}</span>
<br />
<p id="print"></p>
<span>{{ `double ${double}` }}</span>
<br />
<button @click='handleAdd'>Add</button>
</div>
const { reactive, createApp, computed } = Vue
// 创建、挂载
createApp({
setup: () => {
// 响应式数据
// 类似之前的 data
const state = reactive({
count: 0
})
return {
state,
// computed
// 函数形式
double: computed(() => state.count * 2),
// or
// get set 形式
//double: computed({
// get() { return state.count * 2 },
// set(value) { state.count = value }
// })
// method
handleAdd: () => {
state.count++
// double.value++
}
}
}
}).mount('#app')
运行结果
ref 引用
不同于之前的 ref
老版本是组件实例的引用 or dom 节点
新版传入一个值返回一个响应式的对象
<div id="app">
<!-- 使用时 自动读取 value 属性 -->
<span>{{ num }}</span>
<br />
<button @click='handleAdd'>Add</button>
</div>
const { reactive, createApp, ref } = Vue
// 创建、挂载
createApp({
setup: () => {
// 返回一个 { value: 100 }
const num = ref(100)
return {
num,
// method
handleAdd: () => {
// 设置值时 必须改变 value 属性
num.value++
}
}
}
}).mount('#app')
运行结果
readonly
<div id="app">
<span>{{ state.count }}</span>
<br />
<button @click='handleAdd'>Add</button>
</div>
createApp({
setup() {
const state = readonly(reactive({
count: 1
}))
const handleAdd = () => {
state.count++
}
return {
state,
handleAdd
}
}
}).mount('#app')
运行结果
watch
与 Vue.$watch 等效
<div id="app">
<span>{{ state.count }}</span>
<br />
<button @click='handleAdd'>Add</button>
</div>
createApp({
setup() {
const state = reactive({
count: 1
})
const num = ref(0)
const handleAdd = () => {
state.count++
num.value++
}
// 第一参数需要监听的对象
// 第二个参数回调函数
// 观察一个值
watch(() => state.count, (count, preCount) => {
console.log('count:')
console.log(count)
console.log('preCount')
console.log(preCount)
})
// 还可以观察 ref
watch(num, (count, preCount) => {
console.log('count:')
console.log(count)
console.log('preCount')
console.log(preCount)
})
// 观察多个值
watch([() => state.count, num], (count, preCount) => {
console.log('count:')
console.log(count)
console.log('preCount')
console.log(preCount)
})
return {
state,
handleAdd
}
}
}).mount('#app')
运行结果
【笔记不易，如对您有帮助，请点赞，谢谢】
