尝试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 ...
随机推荐
- 1122. Hamiltonian Cycle (25)
The "Hamilton cycle problem" is to find a simple cycle that contains every vertex in a gra ...
- vue项目中使用swiper插件遇到的坑
<style scoped> .swiper-pagination-bullets >>> .swiper-pagination-bullet-active { ...
- 用C语音编写python的扩展模块，也就是python调c库
用C语音编写python的扩展模块,也就是python调c库 1.用C语言扩展Python的功能: http://www.ibm.com/developerworks/cn/linux/l-pyt ...
- 文件打包压缩——tar
tar——压缩数据/解压数据内容 命令语法: tar zcvf 生成压缩包路径/压缩包.tar.gz 压缩数据01,02,03.... 巧记: 压缩名称为tar.gz,可以理解为tar命令,g ...
- 层定位layer
一.如何实现层定位position属性 二.相对定位relative 三.绝对定位absolute 四.元素堆叠z-index 一.实现层定位的方法 position属性实现层定位,把元素分出层次形成 ...
- maven打包的时候you are running on a JRE rather than a JDK?
解决方案.删除掉,然后重新添加. 然后remove掉 然后Add Library
- C#删除文件夹的文件
using System.IO; //判断文件是不是存在if(File.Exists(@"文件路径")){//如果存在则删除File.Delete(@"文件路径" ...
- asp.net大文件上传解决方案
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
- git本地文件提交
一.github在线上传文件夹 1.点击上传文件 2 .直接拖拽 直接拖拽即可上传文件夹及文件夹里面的文件.如果点击 choose your files 就只能上传单个文件. 二.通过git工具上传本 ...
- 大数据笔记（八）——Mapreduce的高级特性（A）
一.序列化 类似于Java的序列化:将对象——>文件 如果一个类实现了Serializable接口,这个类的对象就可以输出为文件 同理,如果一个类实现了的Hadoop的序列化机制(接口:Writ ...