vue学习笔记

最新推荐文章于 2020-07-18 22:13:45 发布

hellosnowyy

最新推荐文章于 2020-07-18 22:13:45 发布

阅读量178

点赞数

CC 4.0 BY-SA版权

分类专栏：随笔

本文链接：https://blog.youkuaiyun.com/u012212157/article/details/79307339

随笔专栏收录该内容

15 篇文章

订阅专栏

本文介绍了Vue.js中计算属性的缓存机制及其setter和getter的使用方式，并展示了如何通过Vue Router配置基本的路由规则。

1.vue 计算属性
计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
  now: function () {
    return Date.now()
  }
}

setter getter

computed: {
  fullName: {
    // getter  获取fullName值时使用
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter  设置fullName值时使用
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

console.log(vm.fullName);  //get
vm.fullName = 'AAA BBB';   //set

const routes = [
  { path: '', redirect: '/HomeA' },
  { path: '/HomeA', component: HomeA },
  { path: '/HomeB', component: HomeB },
  { path: '/HomeC', component: HomeC },
  { path: '/HomeD', component: HomeD }
]
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

http://localhost:8080 ===> http://localhost:8080/#/HomeA