尝试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 ...
随机推荐
- linux系统快速搭建ftp服务器——实现匿名用户和创建用户访问服务器
一.准备工作: linux系统为CentOS Linux release 7.5.1804 (Core) 可以使用 lsb_release -a 命令查看 window系统中安装 SecureCR ...
- 【BZOJ2870】最长道路
权限题 题意 给出一棵树,点有点权,找到树上的一条路径使得路径上点的个数和其中点权最小的点的点权之积最大,输出最大值. Sol 边分治板子题啦. 边分治后对于分出来的两棵子树 , 按到左右根的最小点权 ...
- Python---Tkinter---贪吃蛇（稳定的外部环境，稳定的内心）
# 项目分析: - 构成: - 蛇 Snake - 食物 Food - 世界 World - 蛇和食物属于整个世界 class World: self.snake self.food - 上面代码不太 ...
- 【leetcode】540. Single Element in a Sorted Array
题目如下: 解题思路:题目要求时间复杂度是O(logN),可以尝试使用二分查找法.首先数组是有序的,而且仅有一个元素出现一次,其余均为两次.我们可以先找到数组最中间的元素,记为mid.如果mid和mi ...
- [window] Pyhton轻便好用的spyder IDE如何去除E501 line too long提示
spyder 使用pep8作为代码规范的标准,默认单行长度是89个字符以内. 作为一个完美控,在使用spyer有的进行coding时,每当看到以下这个小小的warning时,心情都不是很爽: 89个字 ...
- 3D Computer Grapihcs Using OpenGL - 06 Vertex and Fragment Shaders
从这里就接触到了可编程图形渲染管线. 下面介绍使用Vertex Shader (顶点着色器)和 Fragment Shader(像素着色器)的方法. 我们的目标是使用这两个着色器给三角形填充绿色. 添 ...
- Online Game Development in C++ 第五部分总结
I. 教程案例框架描述 该套教程做了一个简单的汽车控制系统,没有用到物理模拟.用油门和方向控制汽车的加速度和转向,同时还有一些空气阻力和滚动摩擦力的设置增加了真实感.汽车的位置是通过加速度和时间等计算 ...
- es之分词器和分析器
Elasticsearch这种全文搜索引擎,会用某种算法对建立的文档进行分析,从文档中提取出有效信息(Token) 对于es来说,有内置的分析器(Analyzer)和分词器(Tokenizer) 1: ...
- 转载：PICT使用教程（设计测试用例工具）
原文:https://blog.csdn.net/quiet_girl/article/details/50699543 之前一篇写了正交设计助手的使用教程,与正交设计助手相比,个人觉得PICT的使用 ...
- java中 使用输入+输出流对对象序列化
对象: 注意记得实现 Serializable package com.nf147.sim.entity; import java.io.Serializable; public class News ...