Vue响应式原理 / 双向数据绑定原理 +js语言的特性+基于对象

js既不是面向对象的语言也不是面向过程的语言。JavaScript 是基于原型链编程、基于对象、解释型、动态性(js可以对点击等事件直接做出相应的响应)、跨平台性(只需要浏览器,不依赖操作系统)、弱类型的脚本语言,它不仅可以创建对象,也能使用现有的对象。C、C++等语言先编译后执行,而JavaScript是在程序运行过程中逐行进行解释。

在一个框架设计之初,通常有三种选择:纯运行时的、纯编译时的或运行时+编译时的。如Svelte框架就是纯编译时的,而Vue.js则被设计为运行时+编译时
纯运行时:没有编译过程,无法分析用户输入,也就只能傻傻的全局改变
运行时+编译时:如果加入编译,则可以分析用户输入,有些可能不会改变,有些内容可能改变了,这样我们修改改变的部分就好啦。(即运行时编译)
纯编译时:代码必须编译好才能运行,性能更好,但是灵活性较差。

Vue.js选择了运行时 + 编译时,并且其核心也是Diff算法。同时,Vue在保留运行时的情况下,性能也在逼近纯编译时。
Vue.js作为一个运行时+编译时的框架,在保持灵活性的基础上,还能够通过编译的手段分析用户提供的内容,从而进一步提升更新性能

javascript并不是严格意义的面向对象语言,而是一种基于对象、事件驱动编程的客户端脚本语言。原因:面向对象包括三大特征:封装、继承、多态;而JavaScript中原本只有封装,es6引入class概念之后,模拟了多态,继承也只是模拟继承,只是为使JS更像面向对象,但谈不上面向对象,但是js是基于对象的语言。

JavaScript中es6后才有多态特征;多态,顾名思义,就是多种状态,也就是多种结果。多态表示的是同一操作作用于不同的对象上面可以产生不同的解释和不同的执行结果,它的真正意义在于:实际开发中,只要关心一个接口或基类的编程,而不必关心一个对象所属于的具体类。

ES5之前不存在类的概念,创建对象使用构造函数,通过new操作符来创建;
为使JS更像面向对象,ES6版本引入class概念,其基本语法:

class Cat{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    Say(){
        return '我的名字是' + this.name;
    }
}
var cat1 = new Cat('有鱼',2);
console.log(cat1.Say());//我的名字是有鱼

弱类型:在javascript中,弱类型是指数据类型可以被忽略,一个变量可以赋不同数据类型的值。javascript是一种弱类型语言,它允许变量类型的隐式转换,允许强制类型转换等,如字符串和数值可以自动转化;而强类型语言一般不允许这么做。

JS隐式类型转换只有三种: 
1、转换成数字  
2、转换成布尔值
3、转换成字符串    
//parseInt(12.34,10)   parseInt方法可以接收两个参数,第一个是string,如果是number型
//会隐式转换成string,第二个是进制,默认是十进制/10

parseInt方法详解可参考

强类型语言:强制数据类型定义的语言。也就是说,一旦一个变量被指定了某个数据类型**,如果不经过强制转换**,那么它就永远是这个数据类型了。举个例子:如果你定义了一个整型变量a,那么程序根本不可能将a当作字符串类型处理。强类型定义语言是类型安全的语言。

举个例子证明js是弱类型:在循环语句中(ifwhile)中,一个Object对象可以隐式的转换成BOOLEAN值。
var obj = {name:'jack'}
if(obj){
    //do more
}

数据驱动:
数据驱动是Vue.js 的一个核心思想。就是在开发过程中仅需要关注数据本身,不需要关心数据是如何渲染到视图。其主要表现就是数据响应式和双向绑定。。

数据响应式:
​数据响应式中的数据指的是数据模型,我们基于Vue开发时,数据模型就是个普通的JavaScript对象。数据响应式的核心概念是当我们修改对象中的数据时,视图会进行更新,避免了繁琐的DOM操作,提高了开发效率。

双向数据绑定:
双向数据绑定的核心概念指的是数据改变时,视图改变;视图改变时,数据也随之改变。
v-model是双向数据绑定的语法糖

响应式和双向数据绑定严格来讲不能混为一谈,响应式侧重单向,即数据到视图的单向流动,而双向数据绑定则侧重数据与视图之间的双向流动。
响应式是双向绑定的一环。

Vue响应式原理 / 双向数据绑定原理:
Vue采用数据劫持&发布-订阅模式的方式,通过ES5提供的 Object.defineProperty() 方法来劫持(监控)各属性的 getter 、setter ,并在数据(对象)发生变动时通知订阅者,触发相应的监听回调。要实现Vue中的双向数据绑定,大致可以划分三个模块:Observer、Compile、Watcher,如图:

学习响应式原理时积累的图,帮助理解:

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

组件用虚拟dom和diff算法进行页面的更新
在这里插入图片描述
每个Observer的实例,成员中都有一个Dep的实例
在这里插入图片描述

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值