vue的特点及核心思想

最新推荐文章于 2023-10-30 10:28:37 发布

ꪤ、匿名

最新推荐文章于 2023-10-30 10:28:37 发布

阅读量576

点赞数 1

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/jjjh968/article/details/120706778

版权

一、声明式渲染

命令式渲染：需要具体代码表达在哪里，做什么，关心如何实践。
声明式渲染 ：只需要声明在哪里，做什么（what），而无需关心如何实现(how)。

例子：

声明式编码：无需直接操作DOM
原生js或jquery(命令式编码)：
1.获取元素
2.给元素添加文字
（按步骤）

命令式渲染：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var arr = [1, 2, 3, 4, 5]
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    newArr.push(arr[i] * 2)
  }
  console.log(newArr)
</script>
</body>
</html>

声明式渲染：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var arr = [1, 2, 3, 4, 5]
  var newArr = arr.map(function (item) {
    return item * 2
  })
  console.log(newArr)
</script>
</body>
</html>

二、响应的数据绑定

传统的js操作页面：在以前使用js操作页面的时候是这样的，需要操作某个html元素的数据，就的使用js代码获取dom元素然后在处理业务逻辑
响应式数据绑定的方式操作页面：可以使用v-指令进行渲染或操作数据、方法等，更加的简单。(v-for、v-on、v-if、v-show、v-html、v-text、v-bind、v-model等)

三、可组合的视图组件（组件化）

组件化就是可以将页面和页面中可复用的元素都看做成组件，写页面的过程，就是写组件，然后页面是由这些组件”拼接“起来的组件树。

一个页面映射为组件树。划分组件可维护、可重用、可测试，也就是一个页面由多个组件组合而成。（例子：import导入多个组件）
单文件组件：Js，css，html 存在一个文件中，是一个单文件组件。

四、虚拟DOM

虚拟DOM的概述

运行的js速度是很快的，大量的操作DOM就会很慢，时常在更新数据后会重新渲染页面，这样造成在没有改变数据的地方也重新渲染了DOM节点，这样就造成了很大程度上的资源浪费。

利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM，虚拟Dom就是在js中模拟DOM对象树来优化DOM操作的一种技术或思路。

当数据发生变化时，能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

五、MVVM模式

MVVM概述：M：Model数据模型（对应vue中的data）， V：view 视图模板 (模板) ， vm：view-Model：视图模型（vue中的实例对象）。

View和ViewModel是双向数据绑定的。

MVVM：支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；

vue的MVVM实例：v-model 双向数据绑定

vue是如何进行双向数据绑定的？

原理：数据代理，通过Object.defineProperty() 方法定义一个新属性，或者修改一个对象的现有属性，并返回此对象。使用get()方法，当读取该属性时调用；set()方法，当修改时调用，并且返回修改后的值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据代理</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  
</body>
<script>
  // v-model  的原理 就是数据代理 通过Object.defineProperty函数  get()  set()
  //简单的数据代理的案例，实现通过obj2操作（读/写）obj1
  let obj1 = {x:1};
  let obj2 = {y:2};
// Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。 
  Object.defineProperty(obj2, 'x', {
    get(){//当读取该属性时调用
      return obj1.x
    },
    set(value){//当修改时调用，并且返回修改后的值，改obj1的x,obj2的x也跟着改
      obj1.x = value
    }
  })
  obj1.x=333;
  console.log(obj2)//object{y:2,x:333}
 </script>
</html>

Vue最大的特点（核心）是什么？（vue核心思想）

组件化开发、数据驱动。

组件化开发：

组件化开发，允许我们将网页中的功能，样式，标签封装成可复用的模块。每个模块之间是彼此独立但相互联系的

数据驱动--（双向绑定）： 在vue中，数据的改变会驱动视图的自动更新。

数据变化会自动更新到对应元素中，无需手动操作DOM
对于输入框等可输入的元素，可设置双向数据绑定
Vue.js的数据驱动视图，是基于M-V-VM模型实现
MVVM 是一种软件开发思想

Model: 代表数据；View : 代表视图模板； ViewModel：代表业务逻辑处理的代码

数据驱动优点：

基于MVVM 实现的数据驱动视图，解放了DOM操作
View 与 Model 分离处理，降低代码的耦合度

什么是耦合？

模块与模块之间很多是存在关联的，如果改动一个，其他若干模块都会发生改变，模块之间的关系越是紧密，独立性就越不好。(这种关系，我们称作：耦合度)

什么内聚？

模块内部的代码，相互之间的联系越强，内聚就越高。

一个模块应该尽量去独立，独立的去完成一个功能！如果有新的代码，非得引入到独立的模块中，建议拆分成多模块。

数据驱动的缺点：

双向绑定时，Bug调试难度增大
大型项目中，V和M过多，维护成本过高。

ꪤ、匿名

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的特点及核心思想

一、声明式渲染命令式渲染：需要具体代码表达在哪里，做什么，关心如何实践。声明式渲染：只需要声明在哪里，做什么（what），而无需关心如何实现(how)。例子：声明式编码：无需直接操作DOM原生js或jquery(命令式编码)： 1.获取元素 2.给元素添加文字（按步骤）命令式渲染：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫