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. seleniummaster
			
    http://seleniummaster.com/sitecontent/index.php/component/banners/click/6 Step 1: create a Java proj ...
    
			
    2. 
						
  2. DevExpress v18.2版本亮点——Office File API 篇
			
    行业领先的.NET界面控件——DevExpress v18.2版本亮点详解,本文将介绍了DevExpress Office File API v18.2 的版本亮点,新版30天免费试用!点击下载> ...
    
			
    3. 
						
  3. 应用程序不了找到mysql中的表，客户端可以正常打开表
			
    原因是mysql中区分大小写的参数:lower-case-table-names=1  默认是区分大小写的,程序中代码可能是大小写混合的,其中访问数据库的sql是大小写混合的.所以找不到数据库中的表  ...
    
			
    4. 
						
  4. 前端之CSS：属性操作2
			
    css样式之属性操作 一.文本属性 1.text-align:cnter 文本居中2.line heigth 垂直居中 :行高,和高度对应3.设置图片与文本的距离:vertical-align4.te ...
    
			
    5. 
						
  5. 【leetcode】581. Shortest Unsorted Continuous Subarray
			
    题目如下: 解题思路:本题我采用的是最简单最直接最粗暴的方法,把排序后的nums数组和原始数组比较即可得到答案. 代码如下: /** * @param {number[]} nums * @retur ...
    
			
    6. 
						
  6. react native之使用 Fetch进行网络数据请求
			
    这是一个单独的页面,可以从其他地方跳转过来. 输入语言关键字,从github检索相关数据 import React, {Component} from 'react'; import { StyleS ...
    
			
    7. 
						
  7. C#与.NET Framework c#编程语言，和java是一样的。（c#,java） -->javaweb,asp.net
			
    
			
    8. 
						
  8. qt学习（一）qt三个文件函数的框架
			
    学到点什么, 而不是复制着什么, 每天敲着别人给的代码,苦涩得改完bug, 就这样一天天的过去, 实质上并没有学到什么, 别人的思想只是拿来借鉴, 你的思想是好是坏都是你的, 不用急着抛弃自己. 从q ...
    
			
    9. 
						
  9. SVN 没有弹出输入账号和密的界面
			
    在用TortoiseSVN的时候,点SVN Checkout输入URL之后没有提示要输入账号密码的弹出框,直接跳到下一个界面,解决办法: 因为你在初次登陆svn的时候,点了保存密码的复选框,所以只要清 ...
    
			
    10. 
						
  10. 大文件上传-大视频上传,T级别的,求解决方案
			
    第一点:Java代码实现文件上传 FormFile file = manform.getFile(); String newfileName = null; String newpathname =  ...
    
			
    11.