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="width: 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
												


											
尝试Vue3.0的更多相关文章
	

    
								
  1. vue3.0新特性以及进阶路线
		
    Vue3.0新特性/改动 新手学习路线  ===> 起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要 ...
    
		
    2. 
						
  2. vue3.0 加载json的“另类”方法（非ajax）
		
    问题 加载json一定要用ajax的方式吗? 最近学习vue3.0,在实现一个功能的时候发现一个问题-- 写代码的时候,需要的json太长.太多,和代码放在一起太混乱.看代码总有翻来翻去,又没有&qu ...
    
		
    3. 
						
  3. vue3.0自定义指令（drectives)
		
    在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能 ...
    
		
    4. 
						
  4. 预计2019年发布的Vue3.0到底有什么不一样的地方？
		
    摘要: Vue 3.0预览. 原文:预计今年发布的Vue3.0到底有什么不一样的地方? 作者:小肆 微信公众号:技术放肆聊 Fundebug经授权转载,版权归原作者所有. 还有几个月距离 vue2 的 ...
    
		
    5. 
						
  5. 纯小白入手 vue3.0 CLI - 3.3 - 路由的导航守卫
		
    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
    
		
    6. 
						
  6. 纯小白入手 vue3.0 CLI - 3.2 - 路由的初级使用
		
    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
    
		
    7. 
						
  7. 纯小白入手 vue3.0 CLI - 3.1 - 路由 ( router )
		
    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
    
		
    8. 
						
  8. 纯小白入手 vue3.0 CLI - 2.7 - 组件之间的数据流
		
    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
    
		
    9. 
						
  9. VUE3.0升级与配置（跨域、全局scss变量等）
		
    1.检查本机vue版本 vue -V 2.升级vue3.0命令 npm install -g @vue/cli 3.创建完项目后,在项目根目录新增vue.config.js文件,插入代码(简洁) mo ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 长沙理工大学第十二届ACM大赛-重现赛C	安卓图案解锁 （模拟）
			
    链接:https://ac.nowcoder.com/acm/contest/1/C来源:牛客网 安卓图案解锁 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K,其他语言 ...
    
			
    2. 
						
  2. mysql 分页查询及优化
			
    1.分页查询 select * from table limit startNum,pageSize 或者 select * from table limit pageSize offset star ...
    
			
    3. 
						
  3. 包、time、datetime、hashlib和hmac、request、re
			
    目录 包 包的特点 time模块 datetime模块 hashlib模块和hmac模块 hmac密钥(加盐) typing模块 request模块 正则模块 以下必须得记住 哪些做了解 包 包,这里 ...
    
			
    4. 
						
  4. PageOffice修改注册码升级版本
			
    java: 删除pageoffice.jar所在目录(一般是WEB-INF/lib)下的license.lic文件(若服务器运行时找不到该文件,可在浏览器地址栏里面通过localhost方式访问pos ...
    
			
    5. 
						
  5. 自己动手实现一个网络模型 python
			
    转自:https://www.jianshu.com/p/4b30e1dd2252 common_funcs.py import numpy as np import matplotlib.pyplo ...
    
			
    6. 
						
  6. ARC模式下delloc()注意事项
			
    1.ARC模式下delloc()调用触发时机是对象被销毁,如self.属性=nil 2.ARC模式下delloc()里面不需要手动调用[super dealloc]; 因为系统已经自动调用,多此一举的 ...
    
			
    7. 
						
  7. Spring boot  @Transactional
			
    1.注解@Transactional 2.异常回滚 TransactionAspectSupport.currentTransactionStatus().setRollbackOnly(); @Ov ...
    
			
    8. 
						
  8. getCurrentPages
			
    解释:getCurrentPages 全局函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面. 示例: // index.jsPage({ onShow( ...
    
			
    9. 
						
  9. luogu P1036 选数 x
			
    P1036 选数 题目描述 已知 n 个整数 x1,x2,…,xn,以及一个整数 k(k<n).从 n 个整数中任选 k 个整数相加,可分别得到一系列的和.例如当 n=4,k＝3,4 个整数分别 ...
    
			
    10. 
						
  10. 基于点云的3ds Max快速精细三维建模方法及系统的制作方法 插件开发
			
                                 基于点云的3ds Max快速精细三维建模方法及系统的制作方法[技术领域][0001]本发明涉及数字城市三维建模领域,尤其涉及一种基于点云的3d ...
    
			
    11.