vue复习（二）

Vue组件

创建组件 

组建是根据一个普通的对象创建的，要开发一个组件，只要写一个配置对象即可

该配置对象和vue实力的配置几乎是一样的

//组件配置对象

var myComp = {

methods:{},//具体操作,主要处理一些业务逻辑  方法名(){}

computed:{}, //处理属性的计算,会被缓存(属性值发生改变时才会改变)

方法名(){return}

//生命周期函数都是函数

  data(){

    return {

      // ...

    }

  },

new vue{(

el:"#app",

computed:{},

methods:{}

data:{

//....

}

)}

值得注意的是，组件配置对象和vue实例有以下几点差异：

- 无`el`

- `data`必须是一个函数，该函数返回的对象作为数据

- 由于没有`el`配置，组件的虚拟DOM树必须定义在`template`或`render`中

像组件传递数据

传递数据的方最常见的一种是使用组件属性 component props

var MyComp = {

  props:["p1", "p2", "p3"],

  // 和vue实例一样，使用组件时也会创建组件的实例

  // 而组件的属性会被提取到组件实例中，因此可以在模板中使用

  template: `

    <div>

      {{p1}}, {{p2}}, {{p3}}

    </div>

  `

}

//在使用组件时，向其传递属性：

var OtherComp = {

  components: {

    MyComp

  },

  data(){

    return {

      a:1

    }

  },

  template: `

    <my-comp :p1="a" :p2="2" p3="3"/>

  `

}

在组件中，属性是只读的，绝不可以更改，这叫做单向数据流

搭建工程

详情可见  VUE工程搭建（一）：使用vue-cli构建项目 - 简书

SFC 

单文件组件，Single File Component，即一个文件就包含了一个组件所需的全部代码

预编译

当vue-cli进行打包时，会直接把组件中的模板转换为render函数，这叫做模板预编译

这样做的好处在于：

运行时就不再需要编译模板了，提高了运行效率

打包结果中不再需要vue的编译代码，减少了打包体积

计算属性

完整的计算属性书写：

computed: {

  propName: {

    get(){

      // getter

    },

    set(val){

      // setter

    }

  }

}

只包含getter的计算属性简写：

computed: {

  propName(){

    // getter

  }

}

因此计算属性通常是根据已有数据得到其他数据，并在得到数据的过程中不建议使用异步、当前时间、随机数等副作用操作。

实际上，他们最重要的区别是含义上的区别。计算属性含义上也是一个数据，可以读取也可以赋值；方法含义  上是一个操作，用于处理一些事情。