vue踩坑指南

  1. 入门时,一直不清楚 new Vue 和 Vue.component 选项的区别

new Vue 创建的是根实例

new Vue({
el : '#app',
data(){}
})

Vue.component 创建的是组件

Vue.component('button-counter',{
data(){}
})

因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

  1. 生命周期
    beforeCreate/created beforeMount/mounted
    beforeUpdate/updated beforeDestroy/destroyed
    created 和 mounted 区别:
    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
    mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
    其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。
    参考:https://blog.youkuaiyun.com/xdnloveme/article/details/78035065
  2. render优先级
    render函数>template模板>outer HTML
  3. 组件基本用法
<div id="app">
</div>
Vue.component()定义全局组件
new Vue({ el : '#app' })在每个页面生成一个容器组件

  1. 单文件组件
    什么,你说上面这种写法和你项目中的不一样,是下面这样的,噢,那你说的是单文件组件(.vue)
    https://cn.vuejs.org/v2/guide/single-file-components.html

    <template></template>
    <script></script>
    <style></style>
    

    对,这就是单文件组件,江湖人称 Single-File Components (SFCs),关注点分离并不代表类型分离(此话抄自vue官网),模板逻辑样式是内部耦合的

    <template>
    	<div class="example">{{ msg }}</div>
    </template>
    <script>
    </script>
    export default {
    	data () {
    		return {
    			msg: 'Hello World'
    		}
    	}
    	...
    }
    <style lang="less" scoped>
    .example {
      color: red;
    }
    </style>
    
  2. 指令
    指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性,如v-bind、v-modal、v-on等

  3. 计算属性
    computed计算属性是基于依赖进行缓存,依赖不变,不会重新求值。而
    methods调用方法,都会重新计算。

{{reversedMessage}}
...
computed: {
    reversedMessage: function () {   // 计算属性的 getter
      return this.message.split('').reverse().join('')
    }
  }
  1. v-if v-else
    用key管理可复用的元素
  2. v-show 与 v-if 的不同
    条件渲染,使用 v-if
    条件展示 ,使用v-show

    v-show与v-if都能控制元素的展示,不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
    一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
  3. 全局注册/局部注册
 // 全局注册,用Vue.component注册的
Vue.component("blog-post",{});
// 局部注册,用js对象定义组件,然后在components中引用
var blogPost = { /* ... */ }; 
var app = new Vue({
	el: '#app',
	components: {
		blogPost
	}
}}
  1. 静态/动态prop
// 静态,直接传值
<blog-post title="My journey with Vue"></blog-post>
// 动态
<blog-post :title="title"></blog-post>

vue是单项数据流,同通过prop传递,子组件不应该更改prop,
如要更改,通常有两种情况:

props: [initialCounter, size],
data(){
	return { 
	 	counter: this.initialCounter // 情况一,data,作为初始值
	}
},
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase(); // 情况二,computed,定义计算属性
  }
}
  1. 作用域插槽
    父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。
    slot-scope
  2. 异步组件
    vue允许以工厂函数的方式定义组件,组件被渲染时,工厂函数才会触发
    和webpack的code-splitting配合使用https://cn.vuejs.org/v2/guide/components-dynamic-async.html
Vue.component('async-webpack', resolve=> require(['./my-async-component'], resolve))
// 这个特殊的 `require` 语法将会告诉 webpack,自动将你的构建代码切割成多个包,这些包会通过 Ajax 请求加载
})

也可以在工厂函数中返回一个Promise

Vue.component('async-webpack', () => import('./my-async-component'))
// 这个 `import` 函数会返回一个 `Promise` 对象。

当使用局部注册的时候,你也可以直接提供一个返回 Promise 的函数:

new Vue({
	...
	components: {
		"my-component" : ()=>import('./my-component')
	}
})
  1. 过渡
    Vue 提供了transition封装组件,可以给元素或组件添加进入/离开过渡
<transition name="fade" @beforeEnter="beforeEnter" :class="false"></transition>

在这里插入图片描述

  1. 依赖注入
    this. $parent. $parent. $parent…时,需要依赖注入,
    provide、inject,依赖注入可以看作是“大范围有效的prop”除了
    • 祖先组件不需要知道哪些后代组件使用它提供的属性
    • 后代组件不需要知道注入的属性来自哪里
      provide 允许我们指定想要提供给后代的数据/方法
provide(){
	return {
		getMap: this.getMap
	}
}
...

inject 在任何后代组件,我们都可以使用 inject 选项接收我们想要添加在这个实例上的属性

inject: ['getMap']
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值