vue3学习笔记一：createApp, ref, reactive, onMounted,computed

compositions-api的优势

可以将每个功能相关的代码放在一个部分，避免代码混乱。后面的示例代码中可以看到，将人物部分的逻辑和标题相关的逻辑可以提取到单独的方法中，如果是正式的项目中，这两块的逻辑比较复杂，可以将它们提取到两个单独的js文件中，类似与vue2中的mixins但是不会出现mixins中各个部分的属性互相影响的问题

createApp

用于创建一个新的Vue应用实例

createApp({setup(){//......}
}).mount('#app')

setup

它是Composition API的入口点。创建组件实例，然后初始化props，紧接着就会调用setup函数。它在beforeCreate钩子之前被调用。

ref

用于给基本类型的数据添加响应式

setup(){let title = ref('标题')return {title}
}

reactive

用于给对象添加响应式

setup(){let persion = reactive({name:'小明'})return {persion}
}

ref和reactive的区别

ref也可以传入对象，也可以实现响应式，其内部会自动调用reactive方法
reactive传入基本类型控制台会出警告，并且不会实现响应式
给ref的响应式对象赋值的时候要用.value的形式赋值

computed

这个计算属性方法，接收一个getter函数，返回一个默认不可手动修改的ref对象

setup(){let title = ref('标题')let subtitle = computed(()=> '二级' + title.value )return {title, subtitle}
}

代码部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h2>{{title}}</h2> - <span>{{subTitle}}</span><button @click="changeTitle">改变标题</button> <p>姓名：{{form.name}}</p><p>年龄：{{form.age}}</p><button @click="changeAge">改变年龄</button></div><script src="https://unpkg.com/vue@next"></script><script>// 引入const { createApp, ref, reactive, onMounted,  computed} = Vue;// 初始化createApp({setup(){let {title, changeTitle} = titleFn();let {form, changeAge} = persionFn();// 计算属性let subTitle = computed(()=> title.value + 1000)return {title, changeTitle, form, changeAge, subTitle}; }}).mount('#app')// 人物相关：引用类型的定义和修改function persionFn(){let form = reactive({name:'小明',age:66});function changeAge(){form.age = 100;}return {form, changeAge}}// 标题相关：定义和修改基本类型function titleFn(){let title = ref('标题一');function changeTitle(){// 注意这里到value里赋值title.value = '标题66666666二';}return {title, changeTitle};}</script>
</body>
</html>

vue3学习笔记一：createApp, ref, reactive, onMounted,computed相关推荐

vue3学习笔记（ref, reactive, setup, hook...）
目录一.搭建项目二.常用的Composition API 1.ref函数(实现响应式) 2.reactive函数 3.vue2和vue3响应式的区别 4. setup参数 5.计算属性和监视 6. ...
转载于掘金的vue3学习笔记
声明:转载于掘金的文章,原文地址:https://juejin.cn/post/7005140118960865317/,本文只是自用. 一.简介 2020年9月18日,Vue.js发布3.0版本,代 ...
【Vue】菜头学前端 - vue3学习笔记
目录简介一.创建项目 1.使用vue-clli创建 2.使用Vite创建二.Composition API(组合式API) 1.setup函数 2.ref函数和reactive函数 1.ref函 ...
Vue3 学习笔记 —— 父子组件传值、插槽、提供/注入、兄弟组件传值、mitt
目录 1. 父子组件传值 1.1 父组件给子组件传值 -- v-bind 1.2 子组件接收父组件的传值 -- defineProps 1.3 设置子组件接受参数的默认值 -- withDefault ...
Vue3 学习笔记 —— Teleport、keep-alive
目录 1. Teleport 传送组件 1.1 为什么要使用 Teleport 1.2 如何使用 Teleport 1.3 Teleport 源码 2. keep-alive 缓存组件 2.1 为什么 ...
Vue3学习笔记：了解并使用Pinia状态管理
Vue3是一个流行的JavaScript框架,它允许您构建交互式的Web应用程序.Vue3中使用的状态管理工具是Vuex,但是有一种新的状态管理工具叫做Pinia,它提供了更简单.更轻量级的状态管理方 ...
Vue3 学习笔记 —— 破坏式更新、自定义指令 directive
目录 1. 什么叫破坏式更新? 2. Vue3 中的自定义指令 2.1 自定义指令的生命周期 2.1.1 Vue2 Vs Vue3 的自定义指令生命周期 2.1.2 自定义指令的生命周期中,接收的参数 ...
vue3学习笔记 Composition API setup
一.Composition API优势相对于vue2的option API Vue3的Composition API设计更有优势 Composition(组合式)Api 功能分组 Compositi ...
Vue3学习笔记- NPM包管理工具
导语这篇分享是关于Vue3 系列的学习知识的整理的开始,能够对大家学习带来帮助.也是对自己能力的一种提升. 学习大纲认识NPM 安装NPM 使用NPM NPM中级用法了解package.js ...
Vue 计算属性缓存和方法的区别：从另一段代码来看【vue3学习笔记】
首发自我的博客 zhangmaimai.com,可以访问获取更多内容与及时更新~ https://zhangmaimai.com/2021/08/20/vue-computed-caching-vs- ...