vue文档读书笔记

最新推荐文章于 2023-02-04 17:36:11 发布

luckybing~

最新推荐文章于 2023-02-04 17:36:11 发布

阅读量215

点赞数

分类专栏： vue文档精读

本文链接：https://blog.csdn.net/Luckyzhoufangbing/article/details/107295567

版权

vue文档精读专栏收录该内容

22 篇文章 1 订阅

订阅专栏

1. 当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

如果一个值没有在组件创建时加入data中，这个值改变，视图不会更新

2. 如果 data 对象使用了 Object.freeze 则 data 中的值改变，系统无法追踪变化，不会响应式的更新视图

var obj = {
  isSubmit: true,
  name: '',
  age: 13,
  weight: 58
}

data () {
   return Object.freeze(obj)
}

3. 生命周期

4. 指令 (v-)

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

（1）动态参数

<a v-bind:[attributeName]="url"> ... </a>

此时 attrbuteName 是动态，可以进行判断，比如在场景1下 attrbuteName是值1，在场景2下attrbuteName 是值2

使用 [] 来表示动态参数

<a v-on:[eventName]="doSomething"> ... </a>

绑定的事件名称也可以是动态的这时事件名称需要是字符串比如 'click', 'mouseover' 等，可以根据场景进行赋值判断

5. 计算属性和侦听器

计算属性平时在工作中还没怎么用到，涉及一些计算相关的，直接用方法了，这次可以根据文档的说明来对比验证一下计算属性和方法的关系

（1）计算属性的使用 computed

原理：计算属性提供的函数将用作 Object.defineProperty 中该变量的 getter 函数

这样看来，计算属性和方法的结果是一样的

<template>
  <div>
    <div>{{ message }}</div>
    <div>{{ messageReverse }}</div>
    <div>{{ messageFunction() }}</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      message: 'hello'
    }
  },
  // 计算属性
  computed: {
    messageReverse () {
      // message值改变 messageReverse作出相应的变化
      return this.message.split('').reverse().join("")
    }
  },
  // 使用方法
  methods: {
    messageFunction () {
      return this.message.split('').reverse().join("")
    }
  }
}
</script>
<style scoped>
</style>

（3）计算属性和方法的对比

两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

computed起作用必须它所依赖的值在data中已经初始化过否则不会触发computed

<template>
  <div>
    <!-- 每次点击时，显示的时间都不同 -->
    <button @click="showMethod">methodsNow</button>
    <!-- 每次点击时，显示的时间都相同 -->
    <button @click="showComputed">computed</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      message: 'a'
    }
  },
  // 计算属性
  computed: {
    computedNow: function(){
      return new Date().toLocaleString();
    }
  },
  // 使用方法
  methods: {
    showMethod () {
      console.log(new Date().toLocaleString())
    },
    showComputed () {
      console.log(this.computedNow)
    }
  }
}
</script>
<style scoped>
</style>

总结：计算属性依赖计算的值如果没有变化，则去缓存中取，而计算函数则每次都会重新计算，每次都会执行函数

6. 样式相关

当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

<template>
  <div>
    <!-- 父组件类名给子组件 -->
    <Children class="children_style" />
  </div>
</template>
<script>
import Children from './Children.vue'
export default {
  components: {
    Children
  }
}
</script>
<style scoped>
.children_style {
  color: red;
}
</style>

样式直接作用在了子组件根元素上

7. 当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

8. 用 key 管理可复用的元素

<template>
  <div>
    <div v-if="login">
      <input type="text" placeholder="Enter your address">
    </div>
    <div v-else>
      <input type="text" placeholder="Enter your username">
    </div>
    <button @click="loggleLogin">loggleLogin</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      login: false
    }
  },
  methods: {
    loggleLogin () {
      this.login = !this.login
    }
  }
}
</script>
<style scoped>
</style>

输入框中输入了内容，点击切换状态输入框中的内容没有变化，切换 login 不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。

Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可：

每次切换时，输入框会被重新渲染

<template>
  <div>
    <div v-if="login">
      <input type="text" placeholder="Enter your address" key="address">
    </div>
    <div v-else>
      <input type="text" placeholder="Enter your username" key="username">
    </div>
    <button @click="loggleLogin">loggleLogin</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      login: false
    }
  },
  methods: {
    loggleLogin () {
      this.login = !this.login
    }
  }
}
</script>
<style scoped>
</style>