浅谈 vue实例和 vue组件

vue实例:

import Vue from 'vue';
import app from './app';
import myRouter from './routers';

new Vue({
    el: '#app', //渲染目标
    router: myRouter, //前端路由,整个项目的路由都在这
    template: '<App />', //渲染内容
    components: { //内容内使用到的组件
        App: app
    },
    data:{ //需要用到的数据，根实例一般不需要用
        num1: 5,
        num2: 8,
    },
    methods:{ //需要用到的方法，根实例一般不需要用
        fn1(){
            // .....
        },
        fn2(){
            // .....
        }
    },
    computed:{ //特殊的data,get和set之前都先经过自定义处理
        b(){ //简写相当于只有get
            return 'bbbbb'
        },
        c:{ //完整版
            get(){
                return 'ccc'
            },
            set(val){
                this.a = val;
            }
        }
    },
    watch:{ //检测变量的变化
        num1(n,o){
            console.log(n,o);
        }
    }
})

Vue组件：

相当于上面import的app

export default {
  template: `<div>{{a}}<span v-html="a"></span></div>`.
  data(){
    return{
        a: '你好，<strong>张啊咩</strong>',
        dataC: '',
        dataD: ''
    }
  },
  methods:{
      fn1() {},
      fn2() {},
  },
  computed:{
      b(){
          return 'bbbbb'
      },
      c:methods:{
      fn1() {},
      fn2() {},
  }{
          get(){
              return this.dataC;
          },
          set(val){
              this.dataC = parseInt(val)
          }
      },
      d:{
          get(){
              return this.dataD;
          },
          set(val){
              this.dataD = parseInt(val)
          }
      }
  },
  watch:{
      d(newVal,oldVal){
          console.log(newVal,oldVal);
      }
  },
  props: ['inputData1','inputData2'],
  mixins: [
    {
        methods:{
            fn3() {}
        }
    },
    {
        data(){
            return {
              dataE: ''  
            }
        },
        methods:{
            fn4() {}
        }
    }
  ],
  extends: {
    methods:{
        fn5() {}
    }
  },
  delimiters: ['<%=','%>']，
  beforeRouteEnter:(to,from,next)=>{ //组件进入的路由钩子
     console.log("准备进入");
     next();
  },
  beforeRouteLeave: (to, from, next) => { //组件离开的路由钩子
     console.log("准备离开");
     next();
  }
}

区别

其实vue实例和vue组件本质都是一个组件而已，大家的属性基本是一样的

但是vue实例会比vue组件多出el和router属性，而vue组件的data会被要求必须是函数，防止出现同种组件多实例共享同一个data的事情

vue实例的高逼格写法：

import App from 'app';

new Vue({
    render: h =>h(App)
}).$mount('#app')

我们经常写出一些整个应用就只有一个组件。

所以为了方便，

原来的 template、components ------变成------> render: h=>h(App)

原来的 el ------变成------> .$mount('#app')

ps:mount是挂载的意思

值得注意的是里面的methods

我们千万不要把里面的方法写成箭头函数的形式

因为我们避免不了在这些方法里面写this，若写成箭头函数，this的指向就会变成未被编译成vue对象的这个配置obj

浅谈 vue实例 和 vue组件

浅谈 vue实例和 vue组件