Vue学习笔记

最新推荐文章于 2024-06-08 16:35:45 发布

我只是学了一下编程

最新推荐文章于 2024-06-08 16:35:45 发布

阅读量217

点赞数

分类专栏：学习笔记文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_57222058/article/details/120634597

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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），但也至少算能解决问题吧。

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>

4、computed计算属性函数中不能使用vm变量

在计算属性的函数中，不能使用Vue构造函数返回的vm变量，因为此时vm还未返回，依然处于Vue内部构造函数过程中，遂只能使用this来代替vm。
若要使用typescript，可使用以下方法来实现代码智能感知

vm = vm || this;

另：其他不能用vm变量，只能使用this变量的地方，都可以通过此方法来获得Typescript的智能感知和代码语法检查，比如mounted生命周期系列函数等。
不过模板里的vm引用Typescript无能为力，只能等待ts支持vue的jsx语法了╮(╯_╰)╭

5、计算属性中不能引用其他计算属性？

官方教程中没有找到相关说明(应该是我没找到)，从使用角度而言大致可以总结出以下结论：

计算属性必须引用（依赖）非计算属性或固定值。（见demo1）
计算属性若引用（依赖）其他计算属性，则被引用的计算属性必须引用非计算属性或固定值（见demo2）
计算属性可循环依赖，但最终依赖链上的最上游的计算属性，必须引用非计算属性或固定值。

DEMO1：官方标准用法，计算属性引用非计算属性：

var vm = new Vue({
    el: "#app",
    data: {
        dataVal: "xxcanghai"
    },
    computed: {
        computedVal1: function () {
            //标准用法，计算属性引用非计算属性
            return this.dataVal + "_1";//输出 xxcanghai_1
        }
    }
});

DEMO2：计算属性链式依赖其他计算属性，则依赖链头必须引用非计算属性或固定值

var vm = new Vue({
    el: "#app",
    data: {
        dataVal: "xxcanghai"
    },
    computed: {
        computedVal1: function () {
            return this.dataVal + "_1";
        },
        computedVal2: function () {
            //合法，计算属性computedVal2引用computedVal1，computedVal1再引用dataVal
            return this.computedVal1 + "_2";//输出 xxcanghai_1_2
        }
    }
});

原因很容易理解，如果最终没有引用或依赖任何非计算属性，那么计算属性在计算时会陷入死循环。

6、vue2.0中若使用组件嵌套，则在父组件执行$forceUpdate()之前模板中$children为空数组

触发这个问题有以下几个前提：

vue版本为2.0版本，1.0无此问题。
使用组件嵌套，在父组件的模板中访问$children变量
在渲染完成后没有再将$children变量写入过父组件的data变量（或其他vm数据）
就会触发此问题。

<!--父组件HTML模板-->
<div id="app">
   <div>{{$children.length}}</div> <!--此处显示0，应该为3-->
   <child></child>
   <child></child>
   <child></child>
</div>

//子组件代码
Vue.component("child", {
    template: "<div>child</div>",
});

//父组件声明
new Vue({
    el: "#app",
});

如下图：

解决方案1：使用$forceUpdate()

注册父组件的mounted方法，执行$forceUpdate()

<div id="app">
   <div>{{$children.length}}</div>
   <child></child>
   <child></child>
   <child></child>
</div>

Vue.component("child", {
    template: "<div>child</div>",
});

new Vue({
    el: "#app",
    mounted: function () {
        this.$forceUpdate();//强制重新绘制
    }
});

$children正确了：

解决方案2：使用vm的变量代替$children

注册父组件的mounted方法，将$children赋值给自定义的vm的变量。
同时模板中使用自定义的变量来代替默认的$children

<div id="app">
   <div>{{child.length}}</div> <!--使用自定义的child对象-->
   <child></child>
   <child></child>
   <child></child>
</div>

Vue.component("child", {
    template: "<div>child</div>",
});

var vm = new Vue({
    el: "#app",
    data: {
        child: []
    },
    mounted: function () {
        this.child = this.$children;//手动将$children对象赋值给自定义child变量
    }
});

至于导致此问题的原因只能通过阅读vue2.0版本的源码才能了解了。

7、若父组件的template或render函数中无引用slot元素，则$children恒等于空数组

此问题关联上面第3个问题。
触发此问题的前提：

vue2.0版本
父组件和子组件都直接写在调用方模板中
在模板中访问$children变量
已经解决在上述问题3中强制刷新的问题

复现代码：

<div id="app">
	<!--子组件直接写在调用方的模板中-->
   <parent>
       <child></child>
       <child></child>
       <child></child>
   </parent>
</div>

//父组件
Vue.component("parent", {
    template: "<p>parent child:{{$children.length}} </p>",//模板中无slot元素
    mounted(){
        this.$forceUpdate();
    }
});
Vue.component("child", {
    template: "<div>child</div>"
});

var vm = new Vue({
    el: "#app"
});

解决方案1:父组件模板包含slot元素

在父组件的模板中加入slot元素。或在render函数中引用了this.$slots.default变量

Vue.component("parent", {
    template: "<p>parent child:{{$children.length}} <slot></slot></p>",
    mounted(){
        this.$forceUpdate();
    }
});

解决方案2：在父组件模板中编写子组件定义

此解决方案要修改此问题的复现第2要素，即子组件定义从调用方改为写到父组件的模板中也可解决此问题。

<div id="app">
   <parent>
   </parent>
</div>

Vue.component("parent", {
	//直接在父组件中写明调用子组件标签
    template: "<p>parent child:{{$children.length}}\
                   <child></child>\
                   <child></child>\
              </p>",
    mounted(){
        this.$forceUpdate();
    }
});
Vue.component("child", {
    template: "<div>child</div>",
});

var vm = new Vue({
    el: "#app",
    data: {
        child: []
    }
});

此方法虽然可以解决问题，但是有时我们直接把子组件写在调用方会更方便更利于理解，比如Tab与TabPage组件。
如下Tab组件代码，可能更符合一般人的使用思维：

<div id="app">
   <tab>
       <tab-page>Page1</tab-page>
       <tab-page>Page2</tab-page>
       <tab-page>Page3</tab-page>
   </tab>
</div>

我只是学了一下编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录