关于Vue.js一些问题和思考学习笔记（1）

前言

本文不是Vue.js的教程，只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记。

1、vue和avalon一样，都不支持VM初始时不存在的属性

而在Angular里是可以支持的，因为angular采用脏检查的方式实现双向绑定，vue和avalon都是采用setter和getter实现双向绑定

例，如下代码在一秒后不会显示出“xxcanghai”的字样

<div id="app"> <h1>{{obj.text}}</h1></div><script> var v = new Vue({ el: '#app', data: { obj:{} } }); setTimeout(function(){ v.obj.text="xxcanghai";//无效 },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>

不过Vue其中比avalon好的一点是，Vue在只是对初始化时不存在的属性赋值无效，但显示是不会报错的。而avalon则根本无法显示，对于上述第一段代码运行都会报错（不知道最新的avalon是否修改此问题）

好在vue中提供了$set方法来解决这种赋值失败的问题，如下：

<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>

虽然这种采用字符串来表示变量名的方式会导致无法使用强类型的预编译检查（TypeScript），但也至少算能解决问题吧。

注意：Vue2.0已经废弃了vm.$set的用法，应该使用Vm.set()全局方法。

2、input元素中属性与v-model同时存在以属性为优先

如下代码：当文本框中的value属性与v-model冲突时会以input的value属性为优先，并覆盖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>

对于复选框类型的input上述结论也同样适用，如下：

<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>

复选框的v-model设定为false不选中，同时设定checked属性选中，最终效果为以checked属性优先，复选框被选中，同时v.isCheck属性被改写为true。

3、VM中的函数放到data属性和methods属性中的区别，以及函数调用时带括号与不带括号的区别