【Vue】vue两个核心功能声明式渲染_响应式

1、简介

  • Vue.js 是一个渐进式JavaScript框架,用于构建用户界面。
  • 它以其易用性、灵活性和高效性而闻名。
  • Vue 的两个核心功能是声明式渲染和响应式系统,这两个功能共同为开发者提供了强大的工具来构建动态且响应式的Web应用。

2、声明式渲染

2.1简介

  • 声明式渲染 是 Vue.js 的一个核心特性,它允许开发者以声明的方式将 DOM 绑定到底层 Vue 实例的数据上。
  • 这意味着可以通过 Vue 的模板语法来描述视图应该长什么样,而不是直接操作 DOM 来更新视图。
  • Vue 会自动监测数据的变化,并在数据变化时重新渲染 DOM,以保持视图和数据之间的同步。

2.2示例

假设有一个 Vue 实例,其数据对象中有一个名为 message 的属性。

javascript 复制代码
new Vue({  
  el: '#app',  
  data: {  
    message: 'Hello Vue!'  
  }  
})

在 HTML 中,可以使用 Vue 的模板语法来声明式地渲染这个 message

javascript 复制代码
<div id="app">  
  {{ message }}  
</div>

message 的值变化时,Vue 会自动更新 DOM 以反映新的值,而无需手动编写任何 DOM 更新代码。

3、响应式

3.1简介

  • 响应式系统 是 Vue.js 的另一个核心特性,它使得 Vue 能够自动追踪和响应数据的变化。
  • Vue 通过使用 JavaScript 的 Object.defineProperty(在 Vue 3 中使用 Proxy)来实现这一功能。
  • 当 Vue 实例被创建时,它会遍历 data 选项中的所有属性,并使用 Object.defineProperty 将它们转换为 getter/setter。这样,Vue 就能追踪到每个属性的访问和修改。
  • 当数据被访问时,getter 会被调用,Vue 会记录下这个依赖(通常是一个组件的渲染函数或计算属性)。当数据被修改时,setter 会被调用,Vue 会通知所有依赖这个数据的组件重新渲染。

3.2示例

假设有一个 Vue 实例,并且修改了 message 的值:

javascript 复制代码
vm.message = 'New message!';

由于 message 是响应式的,Vue 会知道 message 的值已经改变,并自动触发更新过程,重新渲染所有依赖 message 的视图部分。

相关推荐
浩星4 分钟前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui
技术钱7 分钟前
element plus 多个form校验
前端
yume_sibai16 分钟前
HTML HTML基础(3)
前端·html
米花丶23 分钟前
JSBridge安全通信:iOS/Android桥对象差异与最佳实践
前端·webview
萌萌哒草头将军1 小时前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。1 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
龙傲天6661 小时前
Scala的面向对象和函数式编程特性 Idea环境搭建和输入输出
前端
蓝色海岛1 小时前
element-ui表格嵌套表格,鼠标移入时样式错乱-问题调研及处理办法
前端
薄雾晚晴1 小时前
Rspack 实战:用 SWC Loader 搞定 JS 兼容(支持 IE 11 + 现代浏览器,兼顾构建速度)
前端·vue.js
恋猫de小郭1 小时前
Flutter 官方 LLM 动态 UI 库 flutter_genui 发布,让 App UI 自己生成 UI
android·前端·flutter