关于Vue.js一些问题和思考学习笔记（1）

本文并非是一篇全面的Vue.js教程，而更像是一个记录学习心得的笔记。在阅读Vue官方教程的过程中，我对某些问题和思考进行了记录，分享给大家，希望能对同样对Vue感兴趣的小伙伴们有所帮助。

关于Vue和某些其他框架（如avalon）的一个显著区别，在于它们对于初始未存在的属性处理方式的不同。Vue和avalon在初始状态下并不支持为不存在的属性赋值，而Angular则可以通过脏检查实现双向绑定，支持此操作。

在Vue中，如果你试图在一秒后通过setTimeout为初始化时未存在的属性赋值，例如`v.obj.text="canghai"`，这个赋值操作会无效。但Vue的设定并不会导致程序报错，它只是在数据未初始化时无法响应赋值操作。相较之下，某些其他框架如avalon则可能在尝试此类操作时直接报错。

为了解决这个问题，Vue提供了一个解决方案：使用`$set`方法。这个方法允许我们通过字符串形式设置对象的属性，即使这个属性在初始化时并不存在。例如，`v.$set("obj.text", "canghai")`会在一秒后成功地为obj对象设置一个名为text的属性并赋值为"canghai"。尽管这种方式在某些情况下可能会导致无法使用强类型的预编译检查（如TypeScript），但至少可以解决问题。值得注意的是，在Vue 2.0及以后的版本中，我们不再使用vm.$set的用法，而应该使用Vm.set()全局方法。

深入了解Vue中属性与v-model的优先级以及函数在data和methods中的差异

在Vue框架中，当我们使用v-model指令与input元素的属性一起使用时，会存在一个优先级的问题。让我们先通过一个示例来深入理解这一点。

假设我们有如下的Vue组件代码：

```html

```

在这个例子中，文本框的value属性与v-model指令冲突。当两者同时存在时，input元素的value属性值会优先生效，覆盖v-model指令所绑定的值。最终控制台输出的值是"inputText"。

对于复选框类型的input元素，这个结论同样适用。当复选框的checked属性与v-model指令冲突时，checked属性会优先生效。这意味着，即使我们在v-model中设定了false来表示未选中状态，但如果设置了checked属性，复选框仍然会被选中，并且与之绑定的数据属性会被修改为true。

接下来，我们来一下Vue中函数应该放在data属性还是methods属性中的区别。经过测试，我们发现把函数放在这两个属性中都可以正常运行。官方推荐将所有VM中的函数都放在methods属性中。这是因为methods属性中的函数具有特定的上下文环境，可以通过this关键字访问Vue实例的数据和方法。而data属性中的函数不具备这种特性。

关于函数调用时带括号与不带括号的区别，如果在事件响应函数中想要获得Event对象，那么事件绑定时不能加括号。如果想要在函数中通过this指向Vue实例化对象，那么函数调用时应当加括号。所有在methods属性中的函数，无论是否加括号调用，this都指向当前Vue实例化对象。为了保持代码的清晰和可维护性，建议把VM中的函数都放在methods中，并在事件绑定时使用无括号方式。

你也可以使用vue内置的$event来显式传递event对象，以确保函数写在任何位置都可以正常使用this和event。这样做可以确保代码的灵活性和可重用性。

当使用Vue框架时，要理解属性与v-model的优先级以及函数在data和methods中的差异，以便更好地组织代码和处理事件。正确的使用方式可以提高代码的可读性和可维护性。Vue学习笔记

在Vue的世界里，每一次点击都是一次。让我们一同跟随这两个按钮，深入了解Vue的两大核心概念：dataFn和methodsFn。

何谓dataFn？这是你在Vue组件中定义的一个函数，通常用于处理组件内部的数据变化。每当相关数据发生变动时，dataFn就会被触发，从而更新视图。当你点击这个按钮时，你是在模拟一个事件，让dataFn在特定的条件下被调用。

而methodsFn，则是你在Vue中定义的一系列方法。这些方法可以在组件的任意位置被调用，包括在事件处理器中。当你点击这个按钮时，你是在调用一个方法，这个方法可以在组件内部执行各种逻辑操作。

这两大核心概念，构成了Vue的骨架。通过它们，你可以轻松实现组件间的数据交互和复杂逻辑处理。

相关笔记：

1. Vue学习笔记-1()：初步了解Vue的基本概念与语法。

2. Vue学习笔记-2()：深入Vue的组件化开发，了解如何构建大型应用。

本文已被整理到了《Vue学习指南》一书中，欢迎大家阅读学习。在学习的道路上，我们不仅需要勤奋，更需要方向。希望这份笔记能为大家的学习提供方向，同时也希望大家能多多支持狼蚁SEO，一起交流学习，共同进步。

以上，就是我们今天的全部内容。希望大家能从中受益，也期待与更多的Vue爱好者共同交流，共同Vue的无限可能。