一、声明式渲染
- 命令式渲染 :需要具体代码表达在哪里,做什么,关心如何实践。
- 声明式渲染 :只需要声明在哪里,做什么(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过多,维护成本过高。