关于Vue.js一些问题和思考学习笔记(2)

 更新时间:2016年12月02日 11:14:26   作者:小小沧海   我要评论

这篇文章主要为大家分享了关于Vue.js一些问题和思考的学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前言

本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论

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

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

vm = vm || this;

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

2、计算属性中不能引用其他计算属性?

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

  • 计算属性必须引用(依赖)非计算属性或固定值。(见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
 }
 }
});

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

3、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版本的源码才能了解了。

4、若父组件的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>

相关笔记

Vue学习笔记-1(//www.sxglgf.com/article/98869.htm)

Vue学习笔记-2(//www.sxglgf.com/article/98878.htm)

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • 浅谈vue的iview列表table render函数设置DOM属性值的方法

    浅谈vue的iview列表table render函数设置DOM属性值的方法

    下面小编就为大家带来一篇浅谈vue的iview列表table render函数设置DOM属性值的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue中的mvvm模式讲解

    vue中的mvvm模式讲解

    今天小编就为大家分享一篇关于vue中的mvvm模式讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Vue 组件封装 并使用 NPM 发布的教程

    Vue 组件封装 并使用 NPM 发布的教程

    这篇文章主要介绍了Vue 组件封装 并使用 NPM 发布的教程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • VUE Error: getaddrinfo ENOTFOUND localhost

    VUE Error: getaddrinfo ENOTFOUND localhost

    这篇文章主要介绍了VUE Error: getaddrinfo ENOTFOUND localhost,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vue中使用vue-i18插件实现多语言切换功能

    Vue中使用vue-i18插件实现多语言切换功能

    在基于vue-cli项目开发过程中,多语言切换功能可使用vue-i18插件,这篇文章分步骤给大家介绍了Vue中使用vue-i18插件实现多语言切换功能,感兴趣的朋友一起看看吧
    2018-04-04
  • 深入理解vue-router之keep-alive

    深入理解vue-router之keep-alive

    本篇文章主要介绍了深入理解vue-router之keep-alive。keep-alive使被包含的组件保留状态,或避免重新渲染,有兴趣的可以了解一下
    2017-08-08
  • vue异步axios获取的数据渲染到页面的方法

    vue异步axios获取的数据渲染到页面的方法

    今天小编就为大家分享一篇vue异步axios获取的数据渲染到页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue+webpack项目基础配置教程

    Vue+webpack项目基础配置教程

    这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下
    2018-02-02
  • 10分钟上手vue-cli 3.0 入门介绍

    10分钟上手vue-cli 3.0 入门介绍

    这篇文章主要介绍了10分钟上手vue-cli 3.0 入门介绍,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Vue学习笔记进阶篇之vue-cli安装及介绍

    Vue学习笔记进阶篇之vue-cli安装及介绍

    这篇文章主要介绍了Vue学习笔记进阶篇之vue-cli安装及介绍,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07

最新评论