尝试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 ...
随机推荐
- 牛客练习赛14 A n的约数 （数论）
链接:https://ac.nowcoder.com/acm/contest/82/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言524288 ...
- Insomni'hack teaser 2019 - Misc - curlpipebash
参考链接 https://ctftime.org/task/7454 题目 Welcome to Insomni'hack teaser 2019! Execute this Bash command ...
- sshfs 挂载远程文件夹
1 安装 # yum install sshfs # dnf + releases] $ sudo apt-get install sshfs [On Debian/Ubuntu based syst ...
- php内核之数组
1.zend_hash_num_elements 获取数组元素个数.宏定义如下: #define zend_hash_num_elements(ht) \ (ht)->nNumOfElement ...
- 关于反射和动态代理和AOP
package Exercise.reflect; /** * 反射把java中所有的东西都当做对象,甚至是类的本身也作为一种对象,并把它作为Class的对象的实例: * 反射是把类.类的属性.方法都 ...
- System.currentTimeMillis和System.nanoTime()
ns(nanosecond):纳秒, 时间单位.一秒的10亿分之一,即等于10的负9次方秒.常用作 内存读写速度的单位. 1纳秒=0.000001 毫秒 1纳秒=0.00000 0001秒 jav ...
- PHP上传一个文件夹
该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开始. 如何分 ...
- sh_01_hello
sh_01_hello print("hello python") print("你好世界")
- 在CentOS7中配置网络时常见的LSB加载失败问题
前几天,为了给OpenNebula扩展新的主机节点,对CentOS7的网络进行了配置.本以为网络配置只需要简单修改ifcfg-eth0即可,但是在重启网络服务时却遇到了一个LSB加载失败的问题(Fai ...
- SpringCloud 教程 （一） 消息总线(Spring Cloud Bus)
Spring Cloud Bus 将分布式的节点用轻量的消息代理连接起来.它可以用于广播配置文件的更改或者服务之间的通讯,也可以用于监控.本文要讲述的是用Spring Cloud Bus实现通知微服务 ...