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>
两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 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 会自动侦测并添加相应的前缀。
<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>
9. v-for 维护状态
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key
本文地址：https://blog.csdn.net/Luckyzhoufangbing/article/details/107295567
如对本文有疑问， 点击进行留言回复！！
蒲公英 · JELLY技术周刊 Vol.14: Vue 3 新特性详解
keepalived+haproxy+mycat+mysql高可用搭建配制
vue中子组件的created、mounted生命周期钩子中获取不到props中的值问题
网友评论