前言

本文不是Vue.js的教程，只是一邊看官網(wǎng)Vue的教程文檔一邊記錄并總結(jié)學(xué)習(xí)過(guò)程中遇到的一些問(wèn)題和思考的筆記。

1、vue和avalon一樣，都不支持VM初始時(shí)不存在的屬性

而在Angular里是可以支持的，因?yàn)閍ngular采用臟檢查的方式實(shí)現(xiàn)雙向綁定，vue和avalon都是采用setter和getter實(shí)現(xiàn)雙向綁定

例，如下代碼在一秒后不會(huì)顯示出“xxcanghai”的字樣

<div id="app">
 <h1>{{obj.text}}</h1>
</div>

<script>
 var v = new Vue({
 el: '#app',
 data: {
 obj:{}
 }
 });
 setTimeout(function(){
 v.obj.text="xxcanghai";//無(wú)效
 },1000);
</script>

若給定初始值，則可生效，如下：

<div id="app">
 <h1>{{obj.text}}</h1>
</div>

<script>
 var v = new Vue({
 el: '#app',
 data: {
 obj:{
 text:"default Text" //給定初始值
 }
 }
 });
 setTimeout(function(){
 v.obj.text="xxcanghai";//有效
 },1000);
</script>

不過(guò)Vue其中比avalon好的一點(diǎn)是，Vue在只是對(duì)初始化時(shí)不存在的屬性賦值無(wú)效，但顯示是不會(huì)報(bào)錯(cuò)的。而avalon則根本無(wú)法顯示，對(duì)于上述第一段代碼運(yùn)行都會(huì)報(bào)錯(cuò)（不知道最新的avalon是否修改此問(wèn)題）

好在vue中提供了$set方法來(lái)解決這種賦值失敗的問(wèn)題，如下：

<div i<div id="app">
 <h1>{{obj.text}}</h1>
</div>

<script>
 var v = new Vue({
 el: '#app',
 data: {
 obj: {}
 }
 });
 setTimeout(function() {
 v.$set("obj.text", "xxcanghai");//有效
 }, 1000);
</script>

雖然這種采用字符串來(lái)表示變量名的方式會(huì)導(dǎo)致無(wú)法使用強(qiáng)類型的預(yù)編譯檢查（TypeScript），但也至少算能解決問(wèn)題吧。

注意：Vue2.0已經(jīng)廢棄了vm.$set的用法，應(yīng)該使用Vm.set()全局方法。

2、input元素中屬性與v-model同時(shí)存在以屬性為優(yōu)先

如下代碼：當(dāng)文本框中的value屬性與v-model沖突時(shí)會(huì)以input的value屬性為優(yōu)先，并覆蓋v-model的屬性
最終console.log輸出的也是“inputText”

<div id="app">
 <input type="text" v-model="a" value="inputText">
</div>
<script>
 var v = new Vue({
 el: '#app',
 data: {
 a: "vueText"
 }
 });
 console.log(v.a);//inputText
</script>

對(duì)于復(fù)選框類型的input上述結(jié)論也同樣適用，如下：

<div id="app">
 <input type="checkbox" v-model="isCheck" checked>
</div>
<script>
 var v = new Vue({
 el: '#app',
 data: {
 isCheck: false
 }
 });
 console.log(v.isCheck);//true
</script>

復(fù)選框的v-model設(shè)定為false不選中，同時(shí)設(shè)定checked屬性選中，最終效果為以checked屬性優(yōu)先，復(fù)選框被選中，同時(shí)v.isCheck屬性被改寫為true。

3、VM中的函數(shù)放到data屬性和methods屬性中的區(qū)別，以及函數(shù)調(diào)用時(shí)帶括號(hào)與不帶括號(hào)的區(qū)別

Vue在實(shí)例化的時(shí)候有一個(gè)特殊的屬性即methods，我看官方文檔中把所有VM中的函數(shù)都放到methods屬性里面，經(jīng)測(cè)試把函數(shù)寫在data和methods中都可以正常運(yùn)行，那么兩者有何區(qū)別？
通過(guò)官方demo可知，在綁定函數(shù)的時(shí)候可以帶括號(hào)也可以不帶括號(hào)，對(duì)于有參數(shù)的函數(shù)那必須帶括號(hào)調(diào)用，但是對(duì)于無(wú)參函數(shù)帶括號(hào)調(diào)用與不帶括號(hào)調(diào)用的區(qū)別是什么？ 以下測(cè)試：

<div id="app">
 <button @click="dataFn">1.dataFn</button> 
 <!--輸出：<button>,[MouseEvent]-->
 
 <button @click="dataFn()">2.dataFn()</button> 
 <!--輸出：Vue,[]-->
 
 <button @click="methodsFn">3.methodsFn</button> 
 <!--輸出：Vue,[MouseEvent]-->
 
 <button @click="methodsFn()">4.methodsFn()</button> 
 <!--輸出：Vue,[]-->
</div>
<script>
 var vm = new Vue({
 el: "#app",
 data: {
 dataFn: function() {
 console.log(this,arguments);
 }
 },
 methods: {
 methodsFn: function() {
 console.log(this,arguments);
 }
 }
 });
 //xxcanghai@博客園
</script>

通過(guò)上述代碼對(duì)比可以得到以下結(jié)論：

• 若想要在事件響應(yīng)函數(shù)中獲得Event對(duì)象，那么事件綁定時(shí)不能加括號(hào)，參見上述1、3示例。
• 若想在函數(shù)中this指向Vue實(shí)例化對(duì)象，函數(shù)調(diào)用時(shí)應(yīng)當(dāng)加括號(hào)。同時(shí)，所有在methods屬性中的函數(shù)，無(wú)論如何調(diào)用，this都指向當(dāng)前Vue實(shí)例化對(duì)象。
• 遂最終結(jié)論為：應(yīng)當(dāng)把所有VM中的函數(shù)都放在methods中，同時(shí)對(duì)于事件的綁定應(yīng)當(dāng)使用無(wú)括號(hào)方式。即上述示例3中為最優(yōu)方案。

PS：當(dāng)然你也可以使用vue內(nèi)置的$event來(lái)顯示的傳遞event對(duì)象，以保證函數(shù)寫在任何位置都可以正常使用this和event。

<div id="app">
 <button @click="dataFn($event)">5.dataFn($event)</button> 
 <!--輸出：Vue,[MouseEvent]-->
 
 <button @click="methodsFn($event)">6.methodsFn($event)</button> 
 <!--輸出：Vue,[MouseEvent]-->
</div>

相關(guān)筆記

Vue學(xué)習(xí)筆記-1(http://www.dbjr.com.cn/article/98869.htm)

Vue學(xué)習(xí)筆記-2(http://www.dbjr.com.cn/article/98878.htm)

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論