Vue.js知识点杂记

渲染

深入式响应–页面监听对象或数组型的数据变化,简单的设置某个元素的的值是无效的,要使用push等变异方法,或者使用vue.$set()

nextTick–DOM发生变化后会执行写入的回调函数

父子组件传值

子传给父–this.$emit()触发事件,传递数据

父传给子–如果是一个对象的话,在父组件的data里要把对象的属性都要声明出来,不然在子组件是渲染不出来的,
同时属性要初始化

prop值修改问题–不要轻易修改组件中prop的值(它是用来父组件传值给子组件,随意修改会影响其在父组件里的数据混乱)对于引入类型的数据如数组和对象来说,它们的值则是数据的地址。这是要区分开来的。

对prop进行“双向绑定”–在一个包含prop的子组件中,用this.$emit('update:title', newTitle)来表达对其赋新值的意图。然后在父组件中可以监听那个事件并更新一个本地的数据属性
<text-document v-bind:title.sync="doc.title"></text-document>

路由

路由前置守卫–想要结束路由守卫,整段代码的逻辑必须有next()进行结尾。

this.$route–定位到了当前路由的对象,可以获取到query、params、name、path等信息
this$router为VueRouter实例,通过push、replace等函数实现了路由的跳转

watch监听

watch失效问题–监听对象,要加一个配置 deep: true
因为对象的值是一个引用,我们改变对象属性的值的时候,改变的不是这个对象的引用,因此监听不到

watch中oldVal对于深度监听对象是无效的,其实对于oldValue的值和newValue的值等同这种现象是合理的,因为都指向了同一个引用,值当然是一样的

其他

混入–分发vue组件中可复用的功能,混入组件的意思是,其他组件可以使用被混入组件的计算属性

template–语义化标签,把它当做不可见的包裹元素,最后不会渲染出来,一般用于插槽,v-if渲染和v-for渲染

在computed的方法内如传递参数–使用闭包

    原文作者:青草怪味豆
    原文地址: https://segmentfault.com/a/1190000018896899
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞