Javascript 进阶 7-5 属性特徵与主流框架(Vue)的关係

这篇文章将利用第七单元所学到的内容来检视 主流框架(Vue) 的撰写技巧

首先我们先来看到 Vue 的原始码: https://github.com/vuejs/vue

因为 Vue 的原始码包含了许多 ES6 的写法，所以需要经过编译才能运用。

大部分未被编译的原始码都包含在 /src 的目录中，所以这里我们先点开 src 的目录!

点进来以后可以看到有很多不同的目录，其实也就是把 Vue 的功能进行分装~

那我们就进入到

这只档案裏面来看一下~

进来之后你就可以看到，Object.defineProperty 以及 Getter 的用法! 是不是很熟悉呢~

再来我们先回到最上层，如果你要找编译后的程式码，可以到 /dist 的资料夹

进来之后呢可以看到 vue.js 以及 vue.min.js，很明显后面的这个就是压缩过后的版本。

那我们进入未压缩的版本~

你就可以看到，里面也是有很多写法你已经有学过或看得懂的~

其中比较特别的技巧就是，如果我们要一个空物件，可以利用 freeze 来产生~

var emptyObject = Object.freeze({});

确保该物件真的是空的!

再来我们来看到我们的範例是怎么运行的!

首先看到

var app = new Vue({    el: '#app',    data:{        num: 1,        obj: {            objnum: 1        }    },    methods: {        add: function () {            this.num += 1;        }    },    mounted: function () {        console.log(this);    }});

这边可以看到 Vue 本身就是一个建构函式的名称，并且传入很多的参数，我们透过在 console 找寻 app 的字样，就可以发现 Vue 的整体，以及我们刚刚传入的资料~

而且你可以看到有 (...) 的样子，就代表这个资料的取得是一个 Getter!

然后把它们点开就可以得到下面的资料显示:

在最后面也可以看到~

而利用Getter 以及 Setter 所製作出来的最大特色，就是双向绑定的响应式原理，也就是不论更动画面上的资料，还是更动js中对应的资料，另一边都会跟着改变!

来看看 Vue 的官方文件说法:

也就是说，每当 getter 或 setter 被执行处发的时候，Vue 会把取出来或存进去的值重新检查看看是否有做更动，有的话则会去判断哪些 DOM 会受到影响，并且重新 render 一次。

以上就是概略的介绍 Vue 有运用到的技巧，如果有兴趣的人可以在自己研究教学课程内容，以及原始码的介绍。

没有问题的话我们就可以继续往下一篇文章进行噜!汪汪~