Vue3入门笔记—2022年1月9日
1. 响应式值（ref和reactive）
一般：
1、ref用于单个值，
2、reactive用于对象类型的数据。
例如:
const name = ref("zhangsan")
const user = reactive({'name': 'zhangsan','age': 18
})
// 当用ref去封装对象类型的数据时，数据发生变化，watch函数监听不到，
// 而reactive函数可以监控的到watch(user,(newVal)=>{// 输出新的值console.log('newVal:' , newVal);
})const refUser = ref({'name': 'zhangsan','age': 18
})watch(refUser,(newVal)=>{// 输出新的值( 这个没办法被监控到 )console.log('newVal:' , newVal);
})
虽然表面上看上去ref和reactive修饰的值都可以发生改变，但是实际ref修饰的值的变化并么有被监控到。
ref和reactive在获取值时候的区别：
const nameRef = ref("zhangsan")
const nameReactive = reactive("zhangsan")// ref需要添加.value
// 而reactive不要
console.log(nameRef.value)
console.log(nameReactive)
2. composition API (组合式API)
通过组合式API，替代以前的：
export default{data:{},methods:{},computed:{}
}// 所有的参数写在option中
// 不利于写大项目，你会上上下下来回跳（写过Vue项目的都懂，写着写着就得去找methods在哪）
// 找对应的参数的位置会浪费很多不必要的时间
如果你坚持使用上面的书写方式，当代码量上去后，你会在data,methods,computed…之间来回跳。
上面是Vue官网中原话，可以作为证明。
尤大大也意识到这个问题，所以才引入了composition API。
composition API ：
import {computed,ref,reactive} from "vue"
export default{setup(){// 需要特别注意：// setup函数中的this是undefined// 该函数执行在beforeCreate和Created生命周期函数之前function funcName(){// 直接写就行，不需要methods属性里面写}let data = reactive({name: 'zhangsan',age: 18,addAge: computed(()=>data.age+1) // 计算属性})return {data,funcName}}}
3. setup函数
setup函数中的this是undefined
该函数执行在beforeCreate和Created生命周期函数之前
无法通过this.xxx, 访问属性
setup(props)
props参数可以用于接收来自父组件的参数 （需通过props属性接收）
context（上下文）中内容非常多：
父组件：
<MySubCompone="111"two="222"msg="hello"> </MySubComp>子组件：
props: {// 显示说明属性one: {type: String,},two: String,},setup(props, context) {console.log('
Vue3入门笔记—2022年1月9日相关推荐
- 尤雨溪：Vue3 将在2022年2月7日成为新的默认版本（你准备好了吗？）
划重点:Vue3 将在 2022 年 2 月 7 日成为新的默认版本! 请务必阅读可能需要采取的措施部分,来确认你是否需要在默认版本切换之前做相应改动以避免发生异常. 从库到框架 在最开始的时候,Vu ...
- Vue3入门笔记----后端框架解释
文章目录 配置后端运行环境 这个系列的笔记重点会放在怎么样利用Vue3把项目架设起来并跟后端API互动,不会介绍Vue的基础特性,关于Vue的基础特性可以参考这个视频 四个小时带你快速入门Vue,我是 ...
- Java学习笔记：2022年1月7日
Java学习笔记:2022年1月7日 摘要:今天的这篇笔记主要是通过讲解基本的JVM结构来理解Java中一些行为的运行机制,进而更加的深入理解Java的运行原理. 文章目录 Java学习笔记:2022 ...
- Java学习笔记：2022年1月11日
Java学习笔记:2022年1月11日 摘要:这篇笔记主要讲解了一些数据在计算机中的存在方式相关的知识点,并由此延伸出了数据在计算机中的操作以及一些数据结构的知识. 文章目录 Java学习笔记:2 ...
- Java学习笔记：2022年1月10日
Java学习笔记:2022年1月10日 摘要:这篇笔记主要记录了学习<Java核心技术 卷一>的第四章时的一些心得,主要阐述了对象与类这一部分的内容.需要注意的是,这一章的内容需要精心 ...
- 【2022年4月1日 经验】Microsoft AZ-900 微软认证 网上考试 攻略
我于2022年4月1日参加了微软AZ-900的考试,总分1000分,700分时及格线,考了928分,考试共计37题,允许答题时间45分钟,实际28分钟就做完了,时间充裕. 背景:我硕士毕业后有五年IT ...
- 2022年7月25日开始学习Jupyter Notebook
今天是2022年7月25日,开始学习Jupyter Notebook. 最近看了一篇论文,采用改进YoloV4模型检测复杂环境下马铃薯_张兆国.论文里的方法是在的复杂环境下检测马铃薯,处理照片所用的软 ...
- 我的创作纪念日 -- 2022年7月25日
我的创作纪念日 - 2022年7月25日 一,机缘 1.1 初遇CSDN 1.2 注册CSDN 1.3 感谢CSDN 二,收获 2.1 正向反馈 2.2 领域同行 三,日常和憧憬 3.1 日常 3.2 ...
- 飞控学习常见典型问题集QA——无名创新（2022年4月15日）
飞控学习常见典型问题集Q&A--无名创新(2022年4月15日) 1.第一次启动FS I6遥控器,进入不了界面一直嘟嘟,请问这是什么情况呢? 先把上面的英文翻译一下,警告:请把所有的开关切换到 ...
最新文章
- 通过外貌就能看出程序员的资历？ | 每日趣闻
- [BZOJ 2523][Ctsc2001]聪明的学生(递归)
- 关于数位动规（入门到进阶，难度中档）
- gitlab的搭建与汉化
- php 调用变量方法名,php中引用（变量和函数名前加符号）用法
- 数字类 default 0和 default 0_04Optional类和接口中的default、static方法
- 一个简单图书管理系统TSGL的应用数据库
- 《iOS网络编程与云端应用最佳实践》微博转发送书了！
- [Unity脚本运行时更新]C#5新特性
- 一说起丁克，我们普遍的认知就是，不生孩子
- VB 几种打开文本文件速度对比
- java 9消失_java9增强的自动关闭资源
- Drupal是基于PHP语言编写的用于开发网站的开发型CMF
- 计算机操作系统详细学习笔记（一）：计算机操作系统概述
- 阿里云矢量图html页面引入,iconfont 阿里巴巴矢量图标库使用说明
- delphi 判断WIN8 , WIN8.1 , WIN10 系统版本
- 2021-2022 ACM-ICPC Brazil Subregional Programming Contest C Creating Multiples
- 三、神奇的自然常数e之“自然”兄弟
- 【技巧分享】股票代码规则
- 旅游防骗攻略[整理]
热门文章