201803-使用vue之个人心得

201801-201803，为期三个月的一个短项目。我有幸使用Vue做了3个月的前端工作。从没听说过到会用一点，vue在某些方面还是给我留有深刻印象的。

1.scoped作用域问题。

    在开发过程中，我发现在很多element-ui(vue的搭档CSS框架)封装好的组件里面，如果想对其中的某个class的样式进行修改或者个人定制但是又不想影响全局或者其他模块，仅仅这么写<style scoped>.a.b{....}</style>是不够的。

    如果把scoped去掉就可以达到修改样式的目标，但是这样会影响到其他使用这个组件的模块。

    因此，为了使样式达到期望值同时又保证不影响全局，我在 这位大侠的启发下，去看了vue-loader。这里面有关于CSS作用域的详细介绍，然后也给出了我想要的解决方案。

    其实很简单啊，<style scoped>.a>>>.b{....}</style>只要换成这种写法就可以了的。唉，我果然道行还太浅，还是再继续潜心修炼吧。

2.双向绑定问题。

    Vue是双向绑定，数据驱动的JS框架，号称是结合了react和angular的优点（然而私心说，好像我没研究到有可以自动分配路由的这个功能）。Vue的数据是双向绑定的。就是说，你在一端改了啥，界面上马上就会跟着改了啥。这有时候蛮好的，但是有时候也会带来烦恼。因为如果不刷新页面，可能在另一端跟着改了的地方不会准确记录你这边的改动。因此，这时候可以考虑用JSON.stringfy()这个，来把表单里这个要改动的数据复制到另一个对象里。然后改动完另一个对象后，把那个对象传到后台去。这样就不会对起初界面上的展示值有影响啦。

    其实，后来有小伙伴给我建议说，JSON.stringfy()这个写法也可以，但是写的太长了，他建议我用JQuery的$.extend()或者是VUE自带的类似extend的方法ve.extendto()(好像是这么写的的么，我都忘了/(ㄒoㄒ)/~~)，也通过将原始对象复制为新对象，然后改动新对象并将该对象传到后台，达到类似效果。