该页面假设你已经阅读过了组件基础。如果你还对组件不太了解,推荐你先阅读它。

注册

局部组件

  1. 创建一个组件Mycomp.vue
  2. 在需要用到的地方引入:
    import Mycomp from './components/Mycomp.vue'
  3. 注册组件
    export default {
     name: 'App',
     components: {
         Mycomp
     }
    }
  4. 使用组件在 template
    <Mycomp></Mycomp> 

组件组成

  1. template 视图
  2. script 逻辑
  3. style 样式

全局组件

  1. 注册全局组件 在Vue对象身上有个Vue.component() 注册全局组件 在所有的组件中 不需要引入 可以直接使用

  2. 语法:
    Vue.component(‘my-component-name’, {

      // ... 选项 ...

    })

  3. 代码演示

    // import Vue from 'vue'//运行时:vue.runtime.js 
    import Vue from 'vue/dist/vue'
    
    /注册全局组件(放到main.js)
    // Vue.component('组件名称',{内容配置})
    Vue.component('my-comp',{
        //视图 template :template作为属性使用 必须vue.js (完整版的vue.js)  默认引入-运行时-vue.runtime.js 
        template:'<div> <h2>我是一个全局组件</h2> <p>{{ msg }}</p></div>',
        //数据
        data(){
            return {
                msg:'hello vue全局组件'
            }
        },
        //方法
        methods:{
    
        }
    })

    全局组件–可以挂载创建好的局部组件 注册全局

    import MyBanner from ‘./components/MyBanner.vue’
    // Vue.component(‘MyBanner’,MyBanner)
    Vue.component(MyBanner.name,MyBanner)

组件中的data为什么是函数

答案
避免组件中的数据互相影响。同一个组件被复用多次会创建多个实例,如果 data 是一个对象的话,这些实例用的是同一个构造函数。为了保证组件的数据独立,要求每个组件都必须通过 data 函数返回一个对象作为组件的状态。

computed和watch的区别

action 与 mutation 的区别

  • mutation 是同步更新, $watch 严格模式下会报错
  • action 是异步操作,可以获取数据后调用 mutation 提交最终数据

Vue 组件通讯有哪几种方式

父传子
通过props传递
父亲提供数据通过属性 props传给儿子;儿子通过 $on 绑父亲的事件,再通过 $emit 触发自己的事件(发布订阅)
利用父子关系 $parent 、 $children

子传父
在父组件中给子组件绑定一个自定义的事件,子组件通过$emit()触发该事件并传值。
父组件: <child @receive = ‘receive’ />
子组件: this.$emit(‘receive’,’传递的数据’)

兄弟组件传值
通过中央通信 let bus = new Vue()
prop 验证,和默认值

v-for 为什么要加 key

v-model 原理

怎样理解 Vue 的单向数据流

Vue2.x响应式数据/双向绑定原理

整体思路是数据劫持+观察者模式
Vue 数据双向绑定主要是指:数据变化更新视图,视图变化更新数据。其中,View变化更新Data,可以通过事件监听的方式来实现,所以 Vue数据双向绑定的工作主要是如何根据Data变化更新View。

虚拟 DOM 是什么 有什么优缺点


谈一下对 vuex 的个人理解

vuex是什么

Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

怎么使用vuex

vuex中有几个核心属性,分别是什么?

  1. 一共有5个核心属性,分别是:
  • state 唯一数据源,Vue 实例中的 data 遵循相同的规则
  • getters 可以认为是 store 的计算属性,就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。Getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值.
  • mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,非常类似于事件,通过store.commit 方法触发
  • action Action 类似于 mutation,不同在于Action 提交的是 mutation,而不是直接变更状态,Action 可以包含任意异步操作
  • module 由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。

路由页面管理(vue-router)

什么是vue-router

怎么使用vue-router

怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

vue-router 路由钩子函数是什么 执行顺序是什么

路由拦截方法

待更新。。。