Vue2 - Vue.observable 介绍

目录

  • 1,介绍
  • 2,使用场景
    • 和 Vue 实例的区别

1,介绍

官网参考

可以让一个对象变成响应式数据。在 Vue 内部就是用它来处理传递给 Vue 的 data 对象,或是在单文件组件中 data() 返回的对象。

var vm = new Vue({data: {count: 0}
})
// 或在单文件组件中
export default {data() {return {count: 0,};},
};

返回的对象可以直接用于渲染函数和计算属性内,并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器,用于简单的场景:

2,使用场景

可以作为小型的状态管理器。

举例:

// store.js
import Vue from "vue";const state = Vue.observable({count: 0,
});export default state;
<template><div><div>{{ count }}</div><button @click="handleClick">count自增</button></div>
</template><script>
import state from "./store.js";
export default {computed: {count() {return state.count;},},methods: {handleClick() {state.count++;},},
};
</script>

和 Vue 实例的区别

状态管理器需要的是:全局的响应式数据。

既然如此,也可以再创建一个 Vue 实例作为全局状态。比如:

// store.js
import Vue from "vue";const state = new Vue({data: {count: 0,},
});export default state;

那和使用 Vue.observable() 创建出的全局状态,有什么区别呢?

  1. new Vue() 本质上也是使用 Vue.observable() 创建的响应式数据。
  2. 但作为全局状态管理器来说,Vue 实例上还会有其他的额外属性,这没必要。

对比下二者包含哪些内容:

Vue.observable()
在这里插入图片描述

Vue 实例

在这里插入图片描述

Vue 实例也有其他的用法,比如可以实现全局通信(数据和事件),参考 EventBus。


以上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/591042.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PDF模板填充,基于IText5(改进版)

原版&#xff1a;PDF模板填充&#xff0c;基于IText5-CSDN博客 \import com.itextpdf.text.Document; import com.itextpdf.text.DocumentException; import com.itextpdf.text.Element; import com.itextpdf.text.Rectangle; import com.itextpdf.text.pdf.*;import java.io.B…

MySQL数据库学习二

2 MySQL InnoDB 锁的基本类型 https://dev.mysql.com/doc/refman/5.7/en/innodb-locking.html 官网把锁分成了 8 类。所以我们把前面的两个行级别的锁&#xff08;Shared and ExclusiveLocks&#xff09;&#xff0c;和两个表级别的锁&#xff08;Intention Locks&#xff09;…

记录:开始学习网络安全

本文持续更新学习进度 背景 在私企干了5年虚拟化、云原生相关的运维&#xff0c;学到了很多&#xff0c;但不成体系。老板是清华毕业法国留学在德勤干过&#xff0c;最后回国创业的野路子。我工作是为了更好的生活&#xff0c;我挺担心老板因为家庭变故或者炒个原油宝&#x…

使用Collectors.toMap()报NullPointerException

使用Collectors.toMap()报NullPointerException 文章目录 使用Collectors.toMap()报NullPointerException问题代码问题分析 记录下最近工作中在使用 stream().collect(Collectors.toMap())出现的空指针问题 问题代码 Test public void test2() {List<Student> studentL…

游泳耳机到底怎么选?一文说全游泳耳机哪个好!

对于一个热爱游泳的人&#xff0c;每次游泳都希望找到一种好的方式来打发时间&#xff0c;同时也希望能够得到一些锻炼。在尝试了各种游泳装备之后&#xff0c;发现游泳耳机是一个非常不错的选择&#xff0c;不过市面上的游泳耳机鱼龙混杂&#xff0c;所以游泳耳机的选择需要综…

深度学习|2.11 向量化vectorization

2.11 向量化的作用 向量化可以使得向量中的每一个维度的数据进行并行计算&#xff0c;从而加快了神经网络的计算速度。 验证 其他

基于Python的新闻推荐平台:网络爬虫与推荐算法实现

项目设计目的 项目旨在开发一个基于Python的新闻推荐平台&#xff0c;通过网络爬虫实时抓取新闻数据&#xff0c;并利用推荐算法为用户提供个性化的新闻推荐服务。通过该平台&#xff0c;用户可以快速获取自己感兴趣的新闻内容&#xff0c;提高用户的阅读体验和粘性。 功能需…

超市订单管理系统

比较简单的超市订单管理系统

4.28 构建onnx结构模型-Unfold

前言 构建onnx方式通常有两种&#xff1a; 1、通过代码转换成onnx结构&#xff0c;比如pytorch —> onnx 2、通过onnx 自定义结点&#xff0c;图&#xff0c;生成onnx结构 本文主要是简单学习和使用两种不同onnx结构&#xff0c; 下面以 Unfold 结点进行分析 方式 方法…

电子书推荐|VMware 替代与升级攻略:技术路线、产品对比与用户实践

在进行 VMware 国产化替代时&#xff0c;您是否会遇到以下问题&#xff1a; 如何实现 VMware 整体架构/部分组件替换&#xff1f;是否可以不仅“为替换而替换”&#xff0c;而是同时实现架构的升级&#xff0c;带来更多业务价值&#xff1f;哪些国产方案具备 VMware 同等能力&…

vue3+ts+vite自定义组件上传npm流程

1. 创建项目 npm create vite 这里踩坑点&#xff1a; 运行vite生成的vue项目时报错“SyntaxError: Unexpected token ?? at “ 是因为node版本过低 电脑为windows11系统&#xff0c;我当时使用的版本node版本是14.21.3&#xff0c;如下图&#xff0c;后边安装了nvm版本…

PyTorch中常用的工具(3)TensorBoard

文章目录 前言3 可视化工具3.1 TensorBoard 前言 在训练神经网络的过程中需要用到很多的工具&#xff0c;最重要的是数据处理、可视化和GPU加速。本章主要介绍PyTorch在这些方面常用的工具模块&#xff0c;合理使用这些工具可以极大地提高编程效率。 由于内容较多&#xff0c…

【解决】电脑上的WIFI图标不见了咋整?

相信不少同学都遇到过这种情况&#xff1a;电脑上的wifi图标莫名不见了&#xff0c;甚至有时候还是在使用的中途突然断网消失的。 遇到这种情况一般有两种解决方案&#xff1a; 1. 在开机状态下长按电源键30秒以上 这种办法应该是给主板放电&#xff0c;一般应用在wifi6上面。…

计算机视觉与自然语言处理(Open AI)

1.语音识别技术 语音识别是将语音转换为文本的技术&#xff0c; 是自然语言处理的一个分支。通过特征的提取、模式的匹配将语音信号变为文本或命令&#xff0c;以实现机器识别和理解语音。 按照应用场景的不同&#xff0c;可以大致分为三类&#xff1b; • 电信级系统应用&…

树莓派(linux)使用Motion动作捕捉或实时获取视频

测试摄像头 查看系统是否识别了摄像头 $ lsusb 测试摄像头抓图&#xff08;拍照&#xff09; 安装 fswebcam sudo apt-get install fswebcam 抓拍一张图,存放与当前目录&#xff0c;并保存为 jpg 格式。 fswebcam /dev/video0 ./img1.jpg 查看摄像头效果 安装 luvcview …

Web前端第9章思维导图

本章内容是关于CSS样式属性&#xff0c;包含CSS单位、CSS字体样式、CSS文本样式、CSS颜色与背景、CSS列表样式、CSS盒模型。重点在于CSS盒模型、CSS文本样式、CSS字体样式。 1. CSS单位 绝对单位 磅&#xff08;pt&#xff09;&#xff0c;pica&#xff08;pc&#xff09;、c…

自动医疗检查仓:未来医疗的新篇章

自动医疗检查仓:未来医疗的新篇章 随着科技的飞速发展,医疗行业正经历着前所未有的变革。其中,自动医疗检查仓作为近年来备受瞩目的创新技术,正在逐渐改变我们对医疗服务的认知和体验。本文将对自动医疗检查仓进行深入剖析,从其技术原理、应用场景到未来发展趋势等方面展…

深度学习核心技术与实践之自然语言处理篇

非书中全部内容&#xff0c;只是写了些自认为有收获的部分。 自然语言处理简介 NLP的难点 &#xff08;1&#xff09;语言有很多复杂的情况&#xff0c;比如歧义、省略、指代、重复、更正、倒序、反语等 &#xff08;2&#xff09;歧义至少有如下几种&#xff1a; …

十大排序总结之——冒泡排序、插入排序

同样&#xff0c;这两几乎也是被淘汰了的算法&#xff0c;尽管它们是稳定的&#xff0c;但是时间复杂度没人喜欢&#xff0c;了解一下就好&#xff0c;没啥好说的&#xff0c;注意最后一句话就行了 一&#xff0c;冒泡排序 1. 算法步骤 共n-1趟&#xff0c;谁两敢冒泡就换了…

十四:爬虫-Redis基础

1、背景 随着互联网大数据时代的来临&#xff0c;传统的关系型数据库已经不能满足中大型网站日益增长的访问量和数据量。这个时候就需要一种能够快速存取数据的组件来缓解数据库服务I/O的压力&#xff0c;来解决系统性能上的瓶颈。 2、redis是什么 Redis 全称 Remote Dictio…