【Vue】 - - - - 自己的理解

最新推荐文章于 2021-07-27 19:24:23 发布

逆风飞翔的代码单身狗

最新推荐文章于 2021-07-27 19:24:23 发布

阅读量127

点赞数

分类专栏： vue 文章标签： js

本文链接：https://blog.csdn.net/weixin_41530639/article/details/105123949

版权

vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一.JS在前端代码：
在书写前端JS框架的时候,JS的功能主要分为:
1.渲染数据(一般都是利用后端传来的数据来渲染页面);
2.操作dom(定时器,轮播图,一些css做不到的特效);
3.操作cookie,session,localStorage等存储机制
等三个方面,那么高效的操作dom,减少操作次数,可以大大地减少浏览器的‘负担’,提高性能
在数据量比较混乱的情况下，渲染和操作数据也是一个难点。
JS框架针对以上问题都有自己的方案去比较完美地解决，可以在开发成本和效率方面有明显的优化，但是缺点就是需要花一定的时间去学习。
二.Vue：
Vue（渐进式JavaScript框架），所谓渐进式，简单的来说就是：
当自己需要什么模块，就引入什么模块就可以。
一般普通的循环，动态的数据双向绑定，依靠Vue自身所带有的指令或者属性就可以解决
当遇到自己本身的指令不足以解决或者简化问题的时候，再引入相应的组件就可以很好地解决问题。
这些就依赖于Vue的特性：主张较弱，它可以在任意类型的项目里面使用，这也是我们需要学习它的很重要的原因；
它也很容易和其他技术融汇在一起进行组合开发，再就是它自身的生态系统特别庞大，可以找到许多相关的工具在Vue项目里面使用，这就使得它有为普通大众广知的特点：
1.易用（成本低，可以与其他技术汇总在一起）
2.灵活（生态系统庞大，可以引用其他插件应用于任意类型的项目）
3.高效（体积小，优化好，性能好）
总结:Vue是一个MVVM（下面会给大家解释）的JS框架,它的关注点在视图层,而开发者关注的是M-V的映射关系。

二.MV*模式：
几乎都是三个部分组成,具有最大的共同点,都是对数据层和视图层的映射关系来的,每一个模式递增都是对映射关系的具体细化
1.MVC: .M:model(数据层) .V:View(视图层) .controller 在这里插入图片描述具体的实现过程:
用户通过对视图层(view)的操作,view捕获到这个操作以后会将处理这个操作的权利转交给controller,controller通过对数据的预处理后,再决定调用model层的哪一个接口,再由model执行相应的业务逻辑,
假如model(数据层)的数据发生变化以后,通过观察者模式(Object Pattern)通知给view,view得知数据变化以后,会重新请求model更新过后的数据,再重新渲染页面。
这种模式所存在的缺陷：
把model所执行的业务逻辑和视图层的展示分离，模块化程度高，view的视图是强依赖于model的数据接口的，故而view无法组件化，无法复用。

MVP：
和MVC一样，M代表model层；V代表视图层，这里的P代表的是presenter

过程：
和MVC一样，也是通过View把用户对View的操作处理的权利传递给presenter，再调用model相应的接口，而model执行完操作，会对自己的数据进行更新，然后通过观察者模式发布消息出去，与MVC不同的是，MVC是直接传递给View层，但是MVP是传递回去给presenter，故而view不强依赖于model层的某个接口，所以view可以组件化
缺陷：
MVP中，从model观察者模式发布消息给view，view再同步地更新视图，这一步需要手动来同步，维护起来比较困难。
.3.MVVM：
和前面两种模式一样，M表示model层，V表示view层，VM即viewmodel，不同的是：
在第二种模式里面的presenter里面有一个binder（亦或者Data-binding engine），指明view层的某一个部位和model的哪一个部位绑定，当viewmodel对model层进行更新的时候，binder会对视图层相应的地方更新相应的数据。这种模式又叫做Two-way Data-binding(即双向数据绑定)

三.Vue的缺陷:
由于Vue使用了许多ES5的特性,故而Vue不支持IE8。
Vue分为两个版本：
1.开发版本：这个版本没有错误提示，属于压缩版，使用于项目上线的时候，不适合初学者使用。
2.生产版本：这个版本没有进行压，会对代码进行相应的错误提示，更好地促进我们对Vue的学习。
由于Vue是MVVM的JS框架，所以它原理上使用的Object.defineProperty方法存在以下缺陷：
1.无法监听Set、Map的变化；
2.属性的添加和删除也无法监听；（这个也是为什么在后续讲到为什么不能用Vue创建的实例动态添加属性的办法，这里可以通过Vue.Set(key,value)方法来实现）
3.无法监听Class类型的数据;
4.数组的增加删除也无法监听;(这里的意思是不可以通过下标去实现数组元素的增加和删除(arr[2]=10)这里可以通过两种方法实现:
4.1可以通过Vue(数组的名字,要变化的位置,值)
4.2可以通过数组的变异方法(后续会讲到,这里稍微提一下,就是JS里面可以改变原数组的方法(如:push()、pop()、shift()、unshift()、sort()、resverse())))
字面上来理解，那么不能改变原数组的方法就不称之为数组的变异方法（如后续会讲到的concat()、slice()）
上述说的监听，实际上就是不能动态地随着数据的变化导致视图的改变，这并不是说方法不能用，或者方法有错误。数据是发生了改变的，只是不能动态地在视图上显示出来，这是因为没有Vue给数据动态绑定的getter和setter方法。

四.Vue的使用:
4.1.Vue的下载安装:
1.官网下载,直接通过script标签引入页面使用即可，此时Vue会作为一个全局变量注册
就可以直接使用vue的相关指令和属性。
友情提示：Vue官网
2.通过npm安装使用，由于我走的是第一种方式，这种方式就不细聊了。
4.2.在页面定义了class或者Id属性的标签名；
再通过script引入Vue模块
再者通过Vue创建一个实例，这里面有一些必要的参数：
el=>这个是必须要写的参数,代表页面(view层)你所绑定的标签(也就是说哪一块区域),
选填参数:
data:{}=>这里就是你所要填写数据的地方,在页面里面用{{你所选定的data中的数据}},
{{}}表示渲染数据的一种语法,动态地渲染,也可以叫做申明式渲染
methods:{}=>这里写入绑定的事件方法名。

		<div id="app">
			   {{msg}}
		 </div>
	    <!--引入了vue.js库-->
	    <script src="./js/vue.js"></script>
	    <script>
	        //创建一个Vue的实例
	        //声明一条数据，然后用特殊的模板语法将其渲染到界面中 ===> 声明式渲染
	        var vm = new Vue({
	            el:"#app", //el=>挂载点
	            data:{     //data=>数据
	                msg:"hello world"
	            }
	        })
	    </script>

扩展：
1.面试可能遇到的提问:
请你解释一下为什么model层数据发生变化,viewmodel就知道数据发生变化了,而且view层就会做出相应的视图变化?
或
请你解释一下Vue双向数据绑定的原理?

回答1:
1.Vue在创建实例的时候,就会把数据配置到实例里面,并且通过Object.defineProperty方法给数据动态地添加getter和setter方法。
当model层数据发生变化，就会触发Vue给数据动态添加的setter方法，当setter方法执行完毕就会发布消息给订阅者（watcher）。binder会通知view层的相应的部位也发生相应的变化，反之亦然。

`也可以这么回答2：
Vue通过数据劫持&发布订阅的方式实现数据的动态双向绑定;
通过Object.defineProperty方法对所有的数据进行数据劫持(也就是动态地设置getter和setter方法),在数据发生变化或者视图发生改变的时候发布消息给订阅者,然后通过viewmodel内部的binder来实现对应视图的变化或者数据的改变。