vue3.0之ref函数
时间:2021-08-19
本文章向大家介绍vue3.0之ref函数,主要包括vue3.0之ref函数使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.ref推荐定义基本数据类型(ref值也可以是对象,但是一般情况下是对象直接使用reactive更合理)。
2.在 Vue 的模板中使用 ref 的值不需要通过 value 获取 (Vue 会通过自动给 ref 的值加上 .value)。
3.在 js 中使用 ref 的值必须使用 .value 获取。
<template> <div>{{count}}</div> </template> <script>
import {ref} from 'vue'
export default { setup(){ const count = ref(10) console.log(count.value) // 10 } } </script>
4.若使用ref定义复杂类型数据,则监听不到数据的变动
实际是走了reactive (const convert = (val) => isObject(val) ? reactive(val) : val)
<script> import {ref, watch} from 'vue' export default { setup(){ const arr = [1,2,3] setTimeout(() => { arr.value[0] = 0 }, 1500) watch(arr, (nelVal) => { // 监听不到arr的变化 }) } } </script>
5.ref函数的实现
(1)craeteRef 创建ref对象(将基本数据类型转为复杂数据类型)
function createRef(rawValue, shallow = false) {
if (isRef(rawValue)) {
return rawValue;
}
return new RefImpl(rawValue, shallow);
}
(2)RefImpl 类(如果传递 shallow = true 则只是代理最外层)
class RefImpl {
constructor(value, _shallow = false) {
this._shallow = _shallow;
this.__v_isRef = true;
this._rawValue = _shallow ? value : toRaw(value);
this._value = _shallow ? value : convert(value); // const convert = (val) => isObject(val) ? reactive(val) : val;
}
get value() { // value 属性访问器
track(toRaw(this), "get" /* GET */, 'value');
return this._value;
}
set value(newVal) { // value 属性设置器
newVal = this._shallow ? newVal : toRaw(newVal);
if (hasChanged(newVal, this._rawValue)) { // 判断新老值是否有变化,改变就更新值,trigger 触发依赖执行
this._rawValue = newVal;
this._value = this._shallow ? newVal : convert(newVal);
trigger(toRaw(this), "set" /* SET */, 'value', newVal);
}
}
}
原文地址:https://www.cnblogs.com/zhaoyd2013/p/15128563.html
- 腾讯AI Lab俞栋:AI的发展需要合作伙伴一起AI in ALL
- NLP+2vec︱认识多种多样的2vec向量化模型
- 深度学习数据集(一)
- 将Spring Boot应用程序部署到Bluemix
- Opencv学习(一)——安装配置遇到的问题
- The .NET of Tomorrow
- 国内自动驾驶企业在美国首秀其最新L4级自动驾驶货运卡车
- Nginx源码安装及调优配置
- Greenplum 简单性能测试与分析
- CentOS6 安装couchdb2 集群
- 如何遍历维数和各维上限未定的多维数组
- 求长度的另一种方法(""+obj).Length
- ASP.NET MVC的客户端验证:jQuery验证在Model验证中的实现
- GreenPlum 简单性能测试与分析(续)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CentOS安装Python2.7与Python2.6并存的方法
- 详解Centos下YUM安装PHP的两种方式
- linux下make命令实现输出高亮的方法
- Ubuntu彻底卸载MySQL、Apache2和Php的方法教程
- linux下如何创建守护进程的步骤
- ubuntu系统中/etc/rc.local和/etc/init.d/rc.local的区别详解
- centos6.8下hadoop3.1.1完全分布式安装指南(推荐)
- 批处理模式下运行 top 命令的方法
- 关于CentOs系统自带python和yum卸载后的解决办法
- Linux sftp命令用法总结
- CentOS 7中搭建NFS文件共享存储服务的完整步骤
- centos 7中添加一个新用户并授权的步骤详解
- Linux下Apache HTTP Server 2.4.26安装教程
- 详解linux下查看系统版本号信息的方法(总结)
- 详解Centos8 配置静态IP的实现