1. v-model实现
父组件
<template>
<div class="home">
<model-test v-model="kk"/>
<p>{{kk}}</p>
</div>
</template>
<script>
import ModelTest from '@/components/ModelTest'
export default {
name: 'home',
data () {
return {
kk: 1
}
},
components: {
ModelTest
}
}
</script>
子组件
<template>
<button class="add" @click="add">ADD</button>
</template>
<script>
export default {
props: {
value: Number
},
data () {
return {
a: 1
}
},
methods: {
add() {
this.a++
this.$emit('input', this.a)
}
}
}
</script>
.sync
父组件
<props-test :value.sync="kk" />
子组件
<template>
<div>
<button class="add" @click="add">TEST</button>
<p>{{value}}</p>
</div>
</template>
<script>
export default {
props: {
value: Number
},
methods: {
add() {
this.$emit('update:value', 11111)
}
}
}
</script>
生命周期
data初始化
因为 props 要比 data先完成初始化,所以可以利用这一点给 data 初始化一些数据进去:
export default {
data (vm) {
return {
buttonSize: vm.size
}
},
props: {
size: String
}
}
善用watch的immediate属性
watch: {
searchInputValue:{
handler: 'fetchPostList',
immediate: true
}
}
computed, watch, 方法区别
computed的数据会缓存,只有依赖的数据变化才会执行,就是说kk值得变化,导致执行update生命周期,watch和方法都会执行,但是computed不会
<template>
<div class="home">
<model-test v-model="kk" />
<p @click="cc">button</p>
<p>data{{cc()}}</p>
<p>{{now}}</p>
</div>
</template>
<script>
import ModelTest from '@/components/ModelTest'
import PropsTest from '@/components/PropsTest'
export default {
name: 'home',
data() {
return {
kk: 1,
aa: 1
}
},
components: {
ModelTest,
PropsTest
},
computed: {
now () {
console.log('com')
return this.aa + 3
}
},
watch: {
kk () {
console.log('watch')
return this.kk + '3'
}
},
methods: {
cc () {
console.log('cc')
return this.aa + 3
}
}
}
</script>
在vue中使用lodash库中的debounce
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
props改变怎么更新子组件数据
每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。
Vue.js用Key值来管理可复用元素
v-for循环时为啥最好不用key做索引
* key值 value值
* 1 苹果
* 2 橘子
* 3 香蕉
当数组倒序时,苹果key变成3,肯定会销毁重建的,但是key值若是pingguo,就是调下顺序
template中不能写v-show
watch和computed还有method区别
computed不能写异步代码
watch可以
method当模板更新了值就会变
destoryed和beforeDestory区别
destoryed后,this上绑定的事件,监听都会被销毁
vm.$destory
组件通信:
props emit
$attrs $listeners A->B->C
$parent $children
#refs
provide inject
eventBus
vuex
销毁定时器
// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
提升编译速度
// 安装插件
cnpm i babel-plugin-dynamic-import-node --save-dev
// .bablerc文件的dev增加配置
"env": {
// 新增插件配置
"development": {
"plugins": ["dynamic-import-node"]
}
// 其他的内容
……
}
// 然后路由文件的引入依旧可以使用之前的异步加载的方式
component: () => import('xxx/xxx')
// 通过注释可以使多个模块打包到一起
component: () => import(/* user */ 'xxx/xxx')
自动化导入模块
当我们某个组件或js文件需要引入多个模块时,一般做法就是,import每个模块,这样显然是相当繁琐的,这时 require.context 函数将派上用场,那个这个函数到底怎么用呢,这里官法介绍是 主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
require.context 函数接受三个参数:
directory {String} -读取文件的路径
useSubdirectories {Boolean} -是否遍历文件的子目录
gExp {RegExp} -匹配文件的正则
require.context 函数执行后返回一个函数,并且这个函数包含了三个属性:
resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
keys {Function} -返回匹配成功模块的名字组成的数组
id {String} -执行环境的id,返回的是一个字符串
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
const path = require('path')
Vue.use(Vuex)
const files = require.context('./modules', false, /\.js$/)
let modules = {}
files.keys().forEach(key => {
let name = path.basename(key, '.js')
modules[name] = files(key).default || files(key)
})
const store = new Vuex.Store({
modules,
getters
})
export default store
computed和watch有什么区别?
computed有缓存,watch没有,但是进过测试发现,watch也是有缓存的,页面重新渲染不会执行watch函数,是写在模板里的方法没有缓存
Vue.extends 和Vue.component区别
Vue.extends是vue的构造器,可以生成vue的实例,可以挂载到dom上,类似于react的protals
Vue.component用于全局注册组件
vue-skeleton-webpack-plugin插件需要分离css
css: {
// 使用 css 分离插件 mini-css-extract-plugin,不然骨架屏组件里的 <style> 不起作用,
extract: true,
},