尝试Vue3.0
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的更多相关文章
- vue3.0新特性以及进阶路线
Vue3.0新特性/改动 新手学习路线 ===> 起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要 ...
- vue3.0 加载json的“另类”方法（非ajax）
问题 加载json一定要用ajax的方式吗? 最近学习vue3.0,在实现一个功能的时候发现一个问题-- 写代码的时候,需要的json太长.太多,和代码放在一起太混乱.看代码总有翻来翻去,又没有&qu ...
- vue3.0自定义指令（drectives)
在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能 ...
- 预计2019年发布的Vue3.0到底有什么不一样的地方？
摘要: Vue 3.0预览. 原文:预计今年发布的Vue3.0到底有什么不一样的地方? 作者:小肆 微信公众号:技术放肆聊 Fundebug经授权转载,版权归原作者所有. 还有几个月距离 vue2 的 ...
- 纯小白入手 vue3.0 CLI - 3.3 - 路由的导航守卫
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 3.2 - 路由的初级使用
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 3.1 - 路由 ( router )
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- 纯小白入手 vue3.0 CLI - 2.7 - 组件之间的数据流
vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 尽量把纷繁的知识,肢解重组成为可以堆砌的知识. ...
- VUE3.0升级与配置（跨域、全局scss变量等）
1.检查本机vue版本 vue -V 2.升级vue3.0命令 npm install -g @vue/cli 3.创建完项目后,在项目根目录新增vue.config.js文件,插入代码(简洁) mo ...
随机推荐
- 关于sass、scss、less的概念性知识汇总
这篇文章主要解答以下几个问题,供前端开发者的新手参考. 1.什么是Sass和Less? 2.为什么要使用CSS预处理器? 3.Sass和Less的比较 4.为什么选择使用Sass而不是Less? 什么 ...
- Spring Boot日志处理
2.4 日志处理 2.4.1 记录日志内容 请求url 访问者ip 调用方法classMethod 参数args 返回内容 2.4.2 新建包aspect,新建日志切面处理类 package com. ...
- python-抽象类和抽象方法
需要模块 import abc 抽象类不能实例化 import abc class Animal(metaclass=abc.ABCMeta): #抽象类 @abc.abstractmethod # ...
- 粘性固定 position:sticky
在研究rem布局时,无意中看到网易新闻移动端首页的导航栏用上了一个CSS 3的属性粘性定位position:sticky,它是相对定位(position:relative)和固定定位(position ...
- LeetCode--102--二叉树的层次遍历（python）
给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如:给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 20 / \ 15 7 ...
- darknet-yolov3模型预测框size不正确的原因
问题描述:预测框的中心位置正常,但是预测的框的width和height不正常. 解决方法:使得训练的配置cfg和测试中cfg的输入width, height, anchorbox保持一致! 问题是我在 ...
- delphi 10.3 控件遮挡 webbrowser
听闻10.3的新特性之一,webbrowser可以被其他控件遮挡, 在等待10.3.1出来后才开始来尝鲜, 但在webbrowser上添加控件后, 发现控件还是被挡住了, 研究发现需要将控件的cont ...
- time,sys,os模块
1.time模块 a:结构化时间:struct_time:通过time.localtime获取到一个时间对象,通过这个对象得到对象属性 ****localtime()如果没有参数,默认返回是一个时 ...
- 【MySQL】 知识点记录
0. 定位和排查问题的常用语句 查询 正在执行的事务(这个输出有事物状态表明是否等待锁):SELECT * FROM information_schema.INNODB_TRX 查看正在锁的事务:SE ...
- sed的一些应用
1. sed 使用变量进行替换,注意使用参数 r 时,需要放在参数 i 的前面 下面这个例子是用2.txt中的版本号替换docker-compose.yml中的版本号,其中变量UPGRADE_NAME ...