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

网络编程 2024/11/16 佚名

3 1 2

前言

本文不是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属性中的区别，以及函数调用时带括号与不带括号的区别

Vue在实例化的时候有一个特殊的属性即methods，我看官方文档中把所有VM中的函数都放到methods属性里面，经测试把函数写在data和methods中都可以正常运行，那么两者有何区别？
通过官方demo可知，在绑定函数的时候可以带括号也可以不带括号，对于有参数的函数那必须带括号调用，但是对于无参函数带括号调用与不带括号调用的区别是什么？以下测试：

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

通过上述代码对比可以得到以下结论：

若想要在事件响应函数中获得Event对象，那么事件绑定时不能加括号，参见上述1、3示例。
若想在函数中this指向Vue实例化对象，函数调用时应当加括号。同时，所有在methods属性中的函数，无论如何调用，this都指向当前Vue实例化对象。
遂最终结论为：应当把所有VM中的函数都放在methods中，同时对于事件的绑定应当使用无括号方式。即上述示例3中为最优方案。

PS：当然你也可以使用vue内置的$event来显示的传递event对象，以保证函数写在任何位置都可以正常使用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>

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

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

最新文章

发烧女声Méav《美芙的祈祷》发烧女声 [WAV+

2024/11/16

雷婷《我的爱回不来》紫银合金AQCD [WAV+C

2024/11/16

群星 DTS《天籁之音·唱醉了草原》2CD[WAV分

2024/11/16

魔兽世界wlk毁灭术一键输出宏是什么 wlk毁灭

2024/11/16

三国志8重制版无法与武将交流怎么办无法与

2024/11/16

一句话新闻

苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

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

利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）

利用jQuery来动态为属性添加或者删除属性的简单方法

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

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）

利用jQuery来动态为属性添加或者删除属性的简单方法

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

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存