子舒的博客
·
vue 学习笔记 (2)－－vue 实例和模板语法
内容提要
Vue 实例通过 `new Vue` 创建，数据对象会被加入响应式系统，数据变化时视图自动更新。使用 `Object.freeze()` 冻结对象后，无法修改其属性。Vue 支持动态参数和修饰符，简化指令书写。模板中只能包含一个 JavaScript 表达式，不支持复杂语句。
关键要点
-
Vue 实例通过 new Vue 创建，所有组件都是 Vue 实例。
-
数据对象中的属性会被加入到 Vue 的响应式系统中，数据变化时视图自动更新。
-
使用 Object.freeze() 方法冻结对象后，无法修改其属性。
-
模板中只能包含一个 JavaScript 表达式，不支持复杂语句。
-
Vue 支持动态参数和修饰符，简化指令书写。
延伸解读
Vue 实例的响应式系统
Vue 实例通过 `new Vue` 创建后，数据对象的属性会被加入响应式系统。这意味着当数据变化时，视图会自动更新。这种机制使得开发者可以专注于数据逻辑，而不必手动更新 DOM，从而提高开发效率。
Object.freeze() 的使用限制
使用 `Object.freeze()` 方法冻结对象后，该对象的属性将无法被修改。这在需要确保数据不被意外更改时非常有用，但也意味着在需要动态更新数据的场景下，冻结对象可能会导致问题。开发者需谨慎使用。
模板语法的表达式限制
在 Vue 的模板中，每个模板只能包含一个 JavaScript 表达式，复杂语句或多个表达式将无法生效。这一限制要求开发者在设计模板时，需合理规划数据展示逻辑，以避免不必要的错误。
动态参数与修饰符的灵活性
Vue 支持动态参数和修饰符，允许开发者以更简洁的方式绑定属性和事件。这种灵活性使得代码更加简洁易读，但也要求开发者对语法规则有清晰的理解，以避免编译警告或错误。
延伸问答
如何创建一个 Vue 实例？
通过使用 `new Vue` 来创建 Vue 实例，例如：`var vm = new Vue({ ... })`。
Vue 的响应式系统是如何工作的？
数据对象中的属性会被加入到 Vue 的响应式系统中，当这些属性的值发生改变时，视图会自动更新。
使用 Object.freeze() 方法有什么效果？
使用 `Object.freeze()` 方法后，无法修改对象的属性，也不能添加或删除属性。
Vue 模板中可以使用哪些 JavaScript 表达式？
模板中只能包含一个 JavaScript 表达式，不能包含复杂语句或多个表达式。
Vue 中的动态参数和修饰符有什么用？
动态参数和修饰符可以简化指令的书写，使得在模板中更灵活地绑定属性和事件。
Vue 实例的生命周期钩子函数有什么作用？
生命周期钩子函数允许在实例的不同阶段执行自定义代码，例如在实例创建后执行特定操作。
