vue computed中get和set的区别与使用方法

vue.js 的 computed 方法：
计算属性是基于它们的依赖进行缓存的，只在相关依赖发生改变时它们才会重新求值。这就意味着 name 和 url 只要还没有发生改变，多次访问 site 计算属性会立即返回之前的计算结果，而不必再次执行函数。用 methods 也可以实现同样的效果，但 methods 在重新渲染的时候会重新调用执行，在性能上 computed 优于 methods，当不需要缓存时可用 methods。

<template>
    <div>
        <Row type="flex" align="middle">
          <i-col span="8">
            <Select v-model="site">
              <Option value="谷歌 http://www.google.com">谷歌 http://www.google.com</Option>
              <Option value="百度 http://www.baidu.co">百度 http://www.baidu.com</Option>
              <Option value="网易 http://www.163.com">网易 http://www.163.com</Option>
            </Select>
          </i-col>
          <i-col span="8" offset="1">
            <div>site：{{ site }}</div>
            <div>name：{{ name }}</div>
            <div>url：{{ url }}</div>
          </i-col>
        </Row>
    </div>
</template>
<script>
export default {
  name: 'MyFirst',
  components: {
  },
  data () {
    return {
      message: '',
      name: '谷歌',
      url: 'http://www.google.com'
    }
  },
  computed: {
    site: {
      // 页面初始化时会先执行一次 get
      // 监视 data 中 name 和 url 的属性值，只有发生改变时，它们才会重新求值，否则取缓存中的
      get () {
        console.log('get')
        return this.name + ' ' + this.url
      },
      // 监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据，类似于 watch 的功能
      set (newValue) {
        console.log('set')
        let names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
}
</script>

执行结果：

切换时：