vue-ssr项目笔记

1. 删除dist目录

vue-ssr.png

2. 获取子组件的实例

 // 相当于调用了子组件内的vue实例
      console.log(this.$refs.fileInput)

3. watch中手动执行一次

image.png

4. watch监听对象属性的变化

image.png

• depp:true 对对象进行深层遍历
• 也可以写成"obj.a" , 直接对对象的某个属性进行监听

5. watch和computed中尽量不要去改监听的值

6. v-once只执行一次

节点下的数据只会获取一次

<h4 class="pro-deploy-header-title" v-once>{{deployTitle}}</h4>

7. props的传值校验

image.png

8. slot传递数据

image.png

• 父组件中引入子组件,用子组件传入的数据(可传递多个)

  
  image.png
  image.png

9.父组件子组件(多层子组件)的传值 (不推荐使用)

• 父组件

<template>
  <div>
<childOne></childOne>
  </div>
</template>

<script>
  import childOne from '../components/test/ChildOne'
  export default {
    name: "Parent",
    provide: {
      for: "demo"
    },
    components:{
      childOne
    }
  }

• 子组件

<template>
  <div>
    {{demo}}
    <childtwo></childtwo>
  </div>
</template>

<script>
  import childtwo from './ChildTwo'
  export default {
    name: "childOne",
    inject: ['for'],
    data() {
      return {
        demo: this.for
      }
    },
    components: {
      childtwo
    }
  }
</script>

• 孙元素

<template>
  <div>
    {{demo}}
  </div>
</template>

<script>
  export default {
    name: "",
    inject: ['for'],
    data() {
      return {
        demo: this.for
      }
    }
  }
</script>

• 从上面这个例子可以看出，只要在父组件中调用了，那么在这个父组件生效的生命周期内，所有的子组件都可以调用inject来注入父组件中的值。
• 缺点: 父组件数据更新无法通知子组件

• 解决方法:

  
  image.png

10. vue-router记住滚动条的位置

image.png

11. vue-router之meta对象

image.png

12. vue-router的参数传递(组件路由解耦)

• router文件

  
  image.png

  • 也可以自定义传参

    
    image.png

• 匹配路由组件(获取参数)
  

  image.png
  直接在组件中this.id就能取到路由传递的值了

13. 命名式router-view

image.png
image.png

14. router的生命周期

image.png

• beforeEach

• 可以根据条件控制路由跳转(比如验证登录)

  
  image.png
• 1. 可以在路由声明写(如上图)

• 2. 也可以在组件内部写

     
     image.png

• 3. 也可以在路由配置写

     
     image.png

• 执行步骤: 1 → 3 → 2 → 再进入下一个路由生命周期

• 组件内部获取数据
  vm就是该组件的this对象

  
  image.png

15. vue子组件怎么调用父组件的方法

• 1.用$emit向父组件触发一个事件，父组件监听这个事件就行了。
• 2.直接用this.$parent.xxxx这样直接调用父组件的方法。

16. vuex的modules命名冲突

• 如果不添加namespaced:true的话, vuex会将所有模块的mutations的方法名放在全局
  image.png

• 使用命名空间后.调用如下

  
  image.png

17. vuex的模块内部 getter方法获取全局state

image.png

• 如果想调用全局模块的方法 必须声明

  
  image.png

17. vuex的热更替功能

开发过程中,我们修改vuex的代码时页面会刷新,如何避免呢?

image.png

18. vuex创建模块

image.png

19. store的watch及subscribe,subscribeAction

• watch: store数据变化时触发回调
• subscribe: store中的mutatios调用时触发函数

• subscribeAction : store中的actios调用时触发函数

  
  image.png
  image.png