Vue2_Vue 实例

news/2025/1/24 18:14:49/文章来源:https://www.cnblogs.com/goicandoit/p/18690061

Vue 实例

image-20250124163102181

创建一个 Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:

var vm = new Vue({// 选项
})

Vue 设计受到了 MVVM模型启发,所以文档常用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例


现在我给出一个标准 HTML 文档结构

这样我们的示例可以方便放入

<!DOCTYPE html> <!-- 声明文档类型为 HTML5 -->
<html lang="zh-CN"> <!-- 根元素,定义页面语言 -->
<head><!-- 元数据区(用户不可见) --><meta charset="UTF-8"> <!-- 字符编码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 响应式必备 --><title>页面标题</title> <!-- 浏览器标签页标题 --><link rel="stylesheet" href="styles.css"> <!-- 引入外部 CSS --><script src="script.js" defer></script> <!-- 引入 JavaScript(defer 延迟加载) -->
</head>
<body><!-- 用户可见内容区 --><header>网站头部(LOGO/导航)</header><nav><a href="#home">首页</a><a href="#news">新闻</a></nav><main> <!-- 页面核心内容 --><article> <!-- 独立内容区块(如博客文章) --><h1>主标题</h1><section> <!-- 内容分组 --><h2>子标题</h2><p>段落文本</p><img src="image.jpg" alt="图片描述"></section></article><aside>侧边栏(广告/相关链接)</aside></main><footer>页脚(版权/联系方式)</footer>
</body>
</html>

解释一下 head 中的元数据,元数据 = 数据的信息说明书,也就是用来描述其他数据特征的数据,类似商品标签

我们再给出一个类似的思维导图,这个思维导图中,body 里面还写了 script

内容与上面代码不完全一致,但意思表达出来了

%%{init: {'theme':'forest'}}%% graph LR;A[HTML] --> B[head]A --> C[body]B --> D[meta]B --> E[title]B --> F[link]B --> G[script]C --> H[header]C --> I[main]C --> J[footer]H --> K[nav]I --> L[section]I --> M[article]L --> N[h1]L --> O[p]M --> P[h2]M --> Q[p]J --> R[p]C --> S[script]

当我们创建一个 Vue 实例的时候,可以传入一个选项对象

比如这个例子里面的对象

new Vue({// 选项对象el: '#app',              // 指定 Vue 实例挂载的 DOM 元素data: {                  // 存储数据message: 'Hello Vue!'},methods: {               // 定义方法greet() {console.log('Hello World!');}},computed: {              // 定义计算属性reversedMessage() {return this.message.split('').reverse().join('');}},mounted() {              // 生命周期钩子console.log('Vue instance mounted');}
});

而使用这些选项的目的是为了创建我们想要的行为

当然文档中有完整的选项列表, API 文档

一个 Vue 应用由

  • 一个通过 new Vue 创建的根 Vue 实例
  • 以及可选的嵌套的、可复用的组件树

组成


举个栗子🌰:

一个 todo 应用的组件树可以是这样

根实例
└─ TodoList├─ TodoItem│  ├─ TodoButtonDelete│  └─ TodoButtonEdit└─ TodoListFooter├─ TodosButtonClear└─ TodoListStatistics

根实例通过 props 传递 todos 数据给 TodoList

TodoItem 则循环传递单个 todo 数据

TodoButtonDelete、TodoButtonEdit 则通过事件 emit 触发

TodoListFooter 内可以通过 props 接收统计信息

总之,所有的 Vue 组件都是 Vue 实例,并且接受相同的选项对象 (一些根实例特有的选项除外)

数据与方法

当一个 Vue 实例被创建时,它将 data 对象中的所有的 property 加入到 Vue 的响应式系统

解释一下,在 JS 中,对象是由 { key: value } 组成的

每个 key 就是对象的一个 property(属性)

当这些 property 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值

// 我们的数据对象
var data = { a: 1 }// 该对象被加入到一个 Vue 实例中
var vm = new Vue({data: data
})
image-20250124150000130

当这些数据改变时,视图会进行重渲染

注意:只有当实例创建时就已经存在 data 中的 property 才是响应式

比如这时候我们在加入一个新的 property

vm.b = 'hi'

那么 b 的改动不会触发任何的视图更新

所有如果我们后面还需要用到 property,一开始它是空或者不存在,那么我们可以设置一些初始值

例如:

data: {newTodoText: '',visitCount: 0,hideCompletedTodos: false,todos: [],error: null
}

不过还有方法可以阻值修改现有的 property,那就是 Object.freeze()

意味着响应系统无法再追踪变化

image-20250124151511776

除了数据 property,Vue 实例还暴露了一些有用的实例 property 与方法

其实就是内置的 property,Vue 自动挂载到实例上的工具属性和方法

它们都有前缀 $,以便与用户定义的 property 区分开来

比如说:

var data = { a: 1 }
var vm = new Vue({el: '#example',data: data
})
// 访问 data 对象
vm.$data === data // => true
// 访问根 DOM 元素
vm.$el === document.getElementById('example') // => true// $watch 是一个实例方法,监听数据变化
vm.$watch('a', function (newValue, oldValue) {// 这个回调将在 `vm.a` 改变后调用
})

API 参考,可以通过链接查阅到完整的实例 property 和方法的列表

实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程

例如:

  • 需要设置数据监听
  • 编译模板
  • 将实例挂载到 DOM 并在数据变化时更新 DOM 等

同时在这个过程中也会运行一些叫做生命周期钩子的函数

这样我们可以在不同阶段添加自己的代码

比如:created 钩子可以用来在一个实例被创建之后执行代码

image-20250124171830809

还有一些其他钩子,在实例生命周期的不同阶段被调用

如: mountedupdateddestroyed

生命周期钩子的 this 上下文指向调用它的 Vue 实例

❗注意

不要在选项 property 或回调上使用箭头函数

比如 created: () => console.log(this.a)vm.$watch('a', newValue => this.myMethod())

因为箭头函数并没有 thisthis 会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: Cannot read property of undefinedUncaught TypeError: this.myMethod is not a function 之类的错误

模板编译

我这里简单讲解一下模板编译

模板编译通常分为三个核心阶段,分别是解析、优化和代码生成

  1. 解析
    • 步骤
      • 使用 HTML 解析器分析模板结构
      • 识别 Vue 特有的语法(指令、插值、组件标签等)
      • 生成 抽象语法树(Abstract Syntax Tree, AST)

举个例子,解析 <div>{{ message }}</div>

输出示例:

{type: 1, // 元素节点tag: 'div',children: [{type: 2, // 文本节点expression: '_s(message)' // 插值表达式转换后的代码}]
}
  1. 优化

    • 通常会遍历 AST(抽象语法树),标记静态节点
    • 通过复用静态节点可以减少内存消耗
  2. 代码生成

    • 输入:优化后的 AST

    • 过程:

      • 将 AST 转换为可执行的 JS 代码
      • 生成 render 函数字符串
    • 输出示例:

      function render() {return _c('div', [_v(_s(message))])
      }
      

编译后,生成的 render 函数会在以下场景执行:

  1. 首次渲染:生成虚拟 DOM → 映射为真实 DOM
  2. 数据变更:重新执行 render 生成新虚拟 DOM → Diff 算法比对差异 → 更新真实 DOM

生命周期图示

下面就来到了面试官爱问的问题,Vue 的生命周期是怎么样的

下图展示了实例的生命周期

Vue 实例生命周期

英文的看着有点累,再上个中文的

img

END

本文主要介绍 Vue 实例,包括如何创建一个 Vue 实例、实例中的数据和方法、实例生命周期钩子以及生命周期的图示,实例的数据和方法主要涉及数据 data 对象,在实例生命周期钩子中简单讲解了模板编译

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

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

相关文章

AI应用实战课学习总结(7)聚类算法分析实战

本文介绍了机器学习中的聚类场景问题,常用的聚类算法 以及 分类和聚类的简单对比,最后再次通过电商订单数据做用户画像的案例做了一次聚类实战,相信对你理解聚类应用应该有所帮助。大家好,我是Edison。 最近入坑黄佳老师的《AI应用实战课》,记录下我的学习之旅,也算是总结…

飞行器半实物联合仿真:技术解析与应用实践

1.背景介绍 当前,飞行器已成为大国博弈复杂场景中的重要角色,其技术经过多次实践不断发展,性能持续提升,整体效能显著增强。随着计算机技术和系统仿真技术的发展,利用计算机模拟和仿真构造一个虚拟飞行器的飞行控制系统已成为可能。这种仿真环境不仅可以定量描述飞行器在真…

函数计算百炼新春活动正式上线!三步赢取蛇年精美好礼

目前,人工智能(AI)正不断突破创作的边界,无论是文字、图像还是视频,AI都能以其卓越的效率和创造力为创作者提供助力。然而,如何让用户快速体验到此类 AI 创作应用,依然是一个需被解决的问题。为此,我们特别推出了基于函数计算百炼模型服务的 AI 创作方案,从剧本创作到…

春节如何用一款软件拯救你的电视?

应用简介 我们的电视(ourtv)是一款完全无广告的电视直播软件,清晰度可选择高清,超清,蓝光等播放。安装即可使用,再也不用费劲去找各种不稳定的直播源了。 “我们的电视”播放线路(直播源)是来自央视频,因此画质和稳定性还可以。不过随之而来的问题是跟央视频 App 不兼…

React Hook Form vs Redux Form

(公众号同步文章:https://mp.weixin.qq.com/s/IUAldltW9ywZ9kXB-NCDxA) Redux Form 想必 React 开发者们非常熟悉,在 Redux 流行的那几年里,Redux Form 是表单页面的标配,但是随着前端的发展与成熟,一些过渡设计的理念逐渐被大家抛弃,Redux 就是便是其中之一。 在大型的…

深度学习基础理论————CV中常用Backbone(Resnet/Unet/Vit系列/多模态系列等)以及代码

主要介绍在CV中常用的Backbone原理简易代码(代码以及原理经常更新),参考论文中的表格,对不同的任务所使用的backbone如下:针对上面内容分为两块内容:1、基于卷积神经网络的CV Backbone:1.Resnet系列;2.Unet系列等;2、基于Transformer的 CV Backbone:1.Vit系列等;3、在…

BUUCTF刷题-Web方向1~5wp

[极客大挑战 2019]EasySQL 一个sql注入登录框,直接万能密码登录拿到flag[极客大挑战 2019]Havefun 打开环境,没有任何信息,查看源码,发现这么一段代码GET方式传入一个cat请求,并且变量值为dog,即?cat=dog,得到flag[HCTF 2018]WarmUp 打开环境,是一张图片,查看源码发现…

99%的人不知道,桥接模式失败的真正原因是它!

前言 大家好,我是VoltCary 最近做一些基础设施的部署工作,以手上的kali linux作为集群的节点,因为用到的是虚拟机,且本机网络为无线wifi,现在希望虚拟机像正常独立主机存在网络中,因此不能像正常本地主机一样直接加入网段节点,虚拟机还需要进行网络的配置。 让虚拟机成为…

Orleans框架升级指南(3.6.5--8.0.0)

升级指南 官方升级指南 https://learn.microsoft.com/zh-cn/dotnet/orleans/migration-guide?source=recommendations主要涉及以下几个改动点ConfigureApplicationParts3.6.5版在Silo初始化的时候,会通过这个方法将指定目录下的Grain加载进来.ConfigureApplicationParts(part…

AtCoder Beginner Contest 386

A - Full House 2 题意给\(4\)个整数,问能否添加一个整数使得恰有\(3\)个整数\(a\)和\(2\)个整数\(b\)思路模拟代码点击查看代码 #include <bits/stdc++.h> using namespace std; #define int long long typedef pair<int, int> pii;const int mxn = 1e6 + 5;void…

Iceberg治理服务Amoro---配置Prometheus + Grafana看板

一、基础资料 1、mac安装Prometheus + Grafana https://www.cnblogs.com/robots2/p/18689540 2、配置文档 https://amoro.apache.org/docs/0.7.1/deployment/#configure-metric-reporter 3、Grafana配置内容 https://github.com/apache/amoro/blob/master/grafana/dashboard.js…

【Python】查找两个表格是否存在相同元素

其实就是字典的应用,把其中一个表格做成字典(将需要查询的元素设为字典的键),然后读取另一个表格逐个在字典中查找 表1:表2:import openpyxlwb1 = openpyxl.load_workbook(r"C:\Users\Lenovo\Desktop\表1.xlsx") ws1 = wb1["Sheet1"] wb2 = openpyxl…