vue笔记（2）

1.router的钩子

（1）beforeEach，前置钩子，在进入页面之前使用，可以对页面进行导向
afterEach，后置钩子，不能改变页面导向，用处不是很大
组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的
router传参
（2）

this.$router.push({
 name:"detail",//name是用于给不同的router-view跳转
 params:{
   name:'xiaoming',//params必须跟着name才能用
 }
});
接受
this.$route.params.name
//query没什么限制，并且是放在url中的
this.$router.push({
  path:'/detail',
  query:{
    name:"xiaoming"
  }
 })
接受 //接收参数是this.$route
this.$route.query.id  

（3）name和path区别。
其实没什么区别，只要对应router.js就行
（4）this.$router 和this.$route有何区别
$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

$route为当前router跳转对象，里面可以获取name、path、query、params等

2.click.stop、click.native、click.self、click.once

（1）native。其实是没什么作用的，只不过给组件级别添加click事件不加native就不会生效，或者内部$emit(“click”,null)。
注意，组件的click传不出来和冒泡没关系，这是父子组件交互的规则
（2）stop。阻止事件冒泡。
（3）once。只存在一次的点击事件。
（4）self。只触发本身的click，冒泡上来的不管。

3.v-model本质

<input v-model="test">
本质上是
<input :value="test" @input="test = $event.target.value">
的语法糖

4.vue指令的生命周期

bind: 一旦指令附加到元素时触发

inserted: 一旦元素被添加到父元素时触发

update: 每当元素本身更新(但是子元素还未更新)时触发

componentUpdate: 每当组件和子组件被更新时触发

unbind: 一旦指令被移除时触发。

5.vue装饰器

vue中最常见的是component装饰器
vue的写法参照下述就可以了

@Component({
    components:{ componentA, componentB},
    props: {
      propMessage: String
    }
})
export default class Parent extends Vue{
  @Prop(Number) readonly propA!: number | undefined
  @Prop({ default: 'default value' }) readonly propB!: string
  @Prop([String, Boolean]) readonly propC!: string | boolean | undefined

  // 初始化数据 data可以声明成类属性形式
  msg = 123

  // 使用props
  helloMsg = 'Hello, ' + this.propMessage

  // 生命周期钩子声明  保留名称
  mounted () {
    this.greet()
  }

  // computed属性可以声明成类方法形式
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // method方法可以声明成类方法形式
  greet () {
    alert('greeting: ' + this.msg)
  }
}

6.vue3新特性

// watchEffet
// 更聪明的watch，自动监听用到的对象而不用指明
const wa = watchEffect(() => {
	// 使用到了哪个 ref/reactive 对象.value, 就监听哪个
	console.log(state.activeIndex)
})

7.vue插件——vue-devtools

太好用了太好用了

8.ui-element之clickoutside

点击除了指令外的元素都会触发！

9.ui-element之loading

v-loading局部加载，值为布尔值

10. vue-lazyload

11.scoped坑点

子组件的根组件还是会吃父组件的样式