标签：一般来说 并且 query 经验 厂商 标签 return 设置 提高
使用vue开发已经有一段时间了，本文主要是记录平时使用过程中踩过的一些坑，以及一些心得。一方面可以自我总结提高，另一方面可以将自己的经验分享出来。
一、为什么要用框架
现在前端行业发展飞快，我们在选用技术栈的时候，一方面要易于上手，另一方面要适合自己的项目。vue就是这样一个前端框架，易于上手，有成熟的文档可以参考、同样有成熟的社区可以讨论问题。最不济可以阅读源码，vue的源码还是比较易读的。
为什么我们开发的时候需要使用框架？以前的jquery不好吗？原生js开发不好吗？使用这些框架能够解决哪些痛点？我就来说说我自己的一些浅见。
1、组件化
组件化开发可以解耦，便于复用，我跟人而言组件化是模块化更进一步的解耦。最初我们在开发前端项目的时候，浏览器原生并不支持模块开发，我们需要使用一些库来给模块化的js提供一个运行平台，例如之前的 requireJs、seaJs等。如果你经历过原始的开发再转型到模块化开发，你就会明白模块化的好处。因为当你在没有模块的开发过程当中，你会发现所有的变量都是全局的，所有的方法都是全局的（当然局部变量除外）。当你在你的js文件当中使用了某个变量的时候，你都找不到这个变量是定义在当前的js文件当中还是定义在其他的js文件中，这就很头疼了。还有就是你引用了别人的js文件，你无法确认你写的方法是不是覆盖了别人的方法。当你使用了模块化开发的时候，你就能通过模块引入的方式来进行你需要依赖的方法、类、对象、常量、变量的引入。并且模块中所有定义的方法变量都不是全局的，这样你会少了很多麻烦。
上面简要谈了谈模块化的好处，模块化对你的js逻辑来说基本上是够用了，但是我们前端不仅有js逻辑，还有html、css这些界面样式。这些东西怎么去解耦呢？怎么拥有自己的局部作用域呢？怎么去复用呢？组件就很好地解决了这个问题。试想一下你需要在页面上做一个拥有提交功能的按钮，你需要在html中写入元素，然后再在js中给这个按钮添加事件。当你的页面上有很多这种按钮的时候，你需要去复制多份，这样一没有起到解耦的效果，二无法复用。现在如果浏览器厂商特意为你的需求定制了一个标签，你只需要在你的html文件中使用这个标签就能完成你所需要的功能，这样是不是很简单，如果你需要多份这样的按钮，你要做的只是将这个标签写到其他地方。当然浏览器不可能为你定制这样一个标签，所以你需要自己为自己定制这样一个标签。这就是组件化的思想。
2、数据绑定
这个可以说是前端三大框架真正能够解决痛点的地方了，因为前面所说的组件化，浏览器马上就要原生支持 webcomponent 了。在原来的开发模式中我们修改页面中的某个元素中的value值，我们需要获取到相应的元素，然后再修改元素的value。获取元素的过程就是操作DOM的过程，浏览器为js提供了操作DOM的接口，前端就是展示页面，也就是改变html及css。改变html和css需要使用脚本语言才能动态地修改，这就是js存在的重要意义。但是操作DOM的过程是繁琐的，而数据绑定可以帮我们从操作DOM的过程中解放出来。试想一下我们如果只需要改变 value的值就可以让页面发生相应的更改，这样我们就可以免去操作DOM的麻烦。我们称这种改变UI的方式为数据绑定。
不管框架是如何实现数据绑定的，我们需要关心的只有数据，因为UI是被数据所驱动的。只要数据发生改变UI就能发生相应的更改。其实细想起来，我们做的UI页面就是一个html DOM树，这颗DOM树完全可以通过内存中的对象来实现数据映射。框架要做的工作就是将内存中的对象与DOM树发生绑定关系，其实内存中的这个对象就是我们经常看到的虚拟DOM。
二、vue的数据绑定原理
vue这个框架很好地实现了以上两个优点。我曾经读过一些vue的源码，下面说说我对vue发生数据绑定的一些理解，如果掌握了vue的工作原理，我们可以在工作当中很好地解释一些难以理解的问题，我认为还是很有必要的。
一般来说我们改变了数据浏览器并不知道需要重新渲染哪些DOM，浏览器只知道当我们显式地改变了DOM的时候才会去重新渲染。很显然改变数据然后通知浏览器去渲染就是我们的vue起的作用。那么vue是怎么知道我们改变了数据的呢？
第一个问题：vue如何知道我们修改了数据？
其实vue并不是万能的，它并不知道我随手写的一个变量是否发生了改变。也就是说vue所监控的变量是有要求的，这个要求就是显式地声明在data和props中的对象属性。也就是说我们改变data对象或者对象中的属性的时候vue是知道我们修改了这些属性的。vue是如何知道的呢？
在我们实例化Vue这个类的时候，它会递归地对data对象设置监听，监听的方式是 使用浏览器支持的 Object.defineProperty() 这个类静态方法对这些属性或对象设置get、set方法。这两个方法有点类似钩子函数，当你去改变data中的某个属性时就会触发set方法，当你去获取data中的某个属性时就会触发get方法。很显然你可以在get和set方法中执行一些操作去修改页面中的DOM。
vue就是这样对我们的数据进行监控的。前面说了 vue是在初始化的时候递归地对属性进行监听的，当你改变了data中某个属性的引用的时候vue会重新对新的对象进行递归地监听。注意这里说的是改变引用的时候才会触发监听绑定，也就是说当你的对象引用没有发生改变，只是给对象增加了一个属性的时候vue是无法对新的属性进行监听的。这也就是为什么你在没有在data中声明属性而是后面添加的属性vue没有办法监听到的原因。通常我们还会犯一个错误，就是我们把开始声明的对象引用改变了，但是新的引用中的属性跟原来的引用的属性有所区别，这样原来的属性就会丢失引用。例如
1 data () { 2 return { 3 pro1: { // 初始声明的引用具有a b两个属性 4 a: 1, 5 b: 2 6 } 7 } 8 } 9 10 ... 11 12 // 后面的某个时刻 13 this.pro1 = {a: 3, c: 4}; 14 15 // 在这里你会发现原来 模板中与 pro1.b 发生绑定关系已经被丢失了
未完待续。。。
标签：一般来说 并且 query 经验 厂商 标签 return 设置 提高
原文地址：https://www.cnblogs.com/kingsm/p/9470940.html
