Composition API 纯函数式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"></div> <script src="./vue.global.js"></script> <script> // Composition API const {reactive, onMounted, effect, createApp, onRenderTriggered, computed, watch, onBeforeMount, createComponent} = Vue; function hooks() { let data = reactive({name: 'SpongeBob'}); onBeforeMount(() => { console.log('hooks-------dom加载') }); onMounted(() => { console.log('hooks-------dom加载完了'); setTimeout(() => { data.name = 'hooks' }, 2000) }); return { data } } const Count = createComponent({ template: `<div> <div style="background: #ccc;" @click="back()"> {{props.age}} </div> </div>`, // props: { // age: { // type: Number // }, // onBack: { // type: Function // } // }, setup (props, context) { console.log('接收到父组件传值为', props); console.log(context); const back = () => { // 调用父组件方法 并传递参数 props.onBack('OK') }; onMounted(() => { console.log('组件-------dom加载完了'); }); return { back, props: props } } }); const App = { template: `<div style=" 100px;"> <div>name:{{data.name}}</div> <div style="background: red;" @click="other()">age:{{count.age}}</div> <div>{{plusOne}}</div> <Count :age="count.age" @back="onBack"></Count> </div>`, components: { Count }, // beforeCreate && created setup () { // hooks const { data } = hooks(); // data const count = reactive({age: 18}); // computed const plusOne = computed(() => '当前值:' + count.age); // method const other = () => { count.age++; }; const onBack = (val) => { console.log('收到子组件------', val); count.age--; }; // watch watch(() => count.age, (v) => console.log('监听到' + v)); // beforeMounted onBeforeMount(() => { console.log('beforeMounted-------dom加载') setTimeout(() => { data.name = 'SpongeBob' }, 5000) }); // mounted onMounted(() => { console.log('mounted-------dom加载完了') }); // beforeUpdate -> onBeforeUpdate // updated -> onUpdated // beforeDestroy -> onBeforeUnmount // destroyed -> onUnmounted // errorCaptured -> onErrorCaptured // 响应式 副作用 effect(() => { console.log('effect--------' + count.age) }); // 返回触发视图更新的事件对象 onRenderTriggered((event) => { // debugger; console.log('视图更新---------', event) }); return { data, count, // data plusOne, // computed other, onBack // method } } }; // 挂载 let app = document.getElementById('app'); let container = createApp().mount(App, app); console.log(container) </script> </body> </html>
Tree-shaking 按需引入 工具函数 // 可以根据所需要的的API引入
新增响应式数据监听API // reactive effect 主要用来实现跨组件之间状态共享
reactive 监听数据的5个状态
effect 初始化触发一次 数据改变触发一次
触发组件更新 用于排查 // onRenderTriggered 返回触发视图更新的事件对象
props传值 以及子组件调用父组件方法
// 传递
// 接收
props为proxy对象 内置父组件传递的值以及方法 方法可以直接调用 可传递参数
context为上下文对象
参考React Hooks (Experimental Hooks) 逻辑复用机制 及Vue Hooks 用于取代mixins