vue踩坑指南

最新推荐文章于 2023-08-11 16:01:40 发布

Gytha_1

最新推荐文章于 2023-08-11 16:01:40 发布

阅读量341

点赞数

CC 4.0 BY-SA版权

分类专栏： js vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Gytha_1/article/details/83379111

js 同时被 2 个专栏收录

45 篇文章

订阅专栏

vue

5 篇文章

订阅专栏

入门时，一直不清楚 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 这样根实例特有的选项。

生命周期
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
render优先级
render函数>template模板>outer HTML
组件基本用法

<div id="app">
</div>
Vue.component()定义全局组件
new Vue({ el : '#app' })在每个页面生成一个容器组件

单文件组件
什么，你说上面这种写法和你项目中的不一样，是下面这样的，噢，那你说的是单文件组件（.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>
```
指令
指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性，如v-bind、v-modal、v-on等
计算属性
computed计算属性是基于依赖进行缓存，依赖不变，不会重新求值。而
methods调用方法，都会重新计算。

{{reversedMessage}}
...
computed: {
    reversedMessage: function () {   // 计算属性的 getter
      return this.message.split('').reverse().join('')
    }
  }

v-if v-else
用key管理可复用的元素
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 较好。
全局注册/局部注册

 // 全局注册，用Vue.component注册的
Vue.component("blog-post",{});
// 局部注册，用js对象定义组件，然后在components中引用
var blogPost = { /* ... */ }; 
var app = new Vue({
	el: '#app',
	components: {
		blogPost
	}
}}

静态/动态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，定义计算属性
  }
}

作用域插槽
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
slot-scope
异步组件
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')
	}
})

过渡
Vue 提供了transition封装组件，可以给元素或组件添加进入/离开过渡

<transition name="fade" @beforeEnter="beforeEnter" :class="false"></transition>

在这里插入图片描述

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

provide(){
	return {
		getMap: this.getMap
	}
}
...

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

inject: ['getMap']