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. Educational Codeforces Round 68 (Rated for Div. 2) D. 1-2-K Game （博弈， sg函数，规律）
			
    D. 1-2-K Game time limit per test2 seconds memory limit per test256 megabytes inputstandard input ou ...
    
			
    2. 
						
  2. java调用shell脚本小demo
			
    复制指定文件cpp.sh: [root@localhost soft]# vim cpp.sh#!/bin/bash name="$1"\cp /home/soft/test/${ ...
    
			
    3. 
						
  3. centos .7x  service iptables save 错误解决方案
			
    保存转发规则的时候,发现service iptables save 无效,而且报错[root@localhost bin]# service iptables saveThe service comm ...
    
			
    4. 
						
  4. 安装win10笔记
			
    1.使用pe安装的时候,要利用winNTSetup安装 2. 3.引导和安装驱动器都选择c盘 4.版本选择教育版,专业版photoshop 不好使.
    
			
    5. 
						
  5. java面向对象复习之一
			
    目的: 复习如何实现代码的逻辑思路: 复习类的封装: 复习类和对象的创建使用和封装: 练习: 实现功能:人到超市买东西 抽出三个类: 人 超市 东西: 功能点: 买: 它们之间的联系:东西包含于超市  ...
    
			
    6. 
						
  6. Xcode 代码注释
			
    /** * 生成二维码 * * @param data 二维码数据 * @param size 二维码大小 * @param color 二维码颜色 * @param backgroundColor  ...
    
			
    7. 
						
  7. android 如何引用jar包
			
    首先,把jar包放到项目目录app/libs下,然后是项目引用:三个方法 方法一.添加compile 打开app下的build.gradle,在dependencies里面添加 implementat ...
    
			
    8. 
						
  8. 有了二叉查找树、平衡树（AVL）为啥还需要红黑树？
			
    序言 二叉查找树的缺点 平衡二叉树 虽然平衡树解决了二叉查找树退化为近似链表的缺点,能够把查找时间控制在 O(logn),不过却不是最佳的,因为平衡树要求每个节点的左子树和右子树的高度差至多等于1,这 ...
    
			
    9. 
						
  9. R语言预测实战（第二章--预测方法论）
			
    2.1预测流程 从确定预测主题开始,一次进行数据收集.选择方法.分析规律.建立模型.评估效果直到发布模型. 2.2.1确定主题 (1)指标:表达的是数量特征,预测的结果也通常是通过指标的取值来体现.  ...
    
			
    10. 
						
  10. BigDecimal保留两位小数，或指定精确的位数
			
    public static void main(String[] args) { BigDecimal t1 = new BigDecimal("3.15289"); BigDec ...
    
			
    11.