
Vue2与Vue3学习笔记
5星
- 浏览量: 0
- 大小:None
- 文件类型:PDF
简介:
《Vue2与Vue3学习笔记》是一份详细的记录文档,涵盖了从基础概念到高级特性的全面解析,旨在帮助开发者深入了解并掌握Vue.js的两个主要版本。
Vue2+Vue3 学习笔记
在 Vue 中,`mounted` 和 `updated` 是两个重要的生命周期钩子函数。当页面初次加载完成时调用的是 `mounted` 函数;而当数据发生变化并导致组件重新渲染之后触发的则是 `updated` 钩子。需要注意的是,如果只是修改了某个变量的数据值但未在视图中展示该变化,则不会触发出 `updated` 方法。
关于 Vue 中的 `data` 属性有两种定义方式:函数式和对象形式。采用函数式的数据定义方法时,对一个实例中的属性进行更改并不会影响到另一个使用相同配置的对象;而如果选择以对象的形式来设置 data ,那么修改其中一个实例的数据将会影响所有基于该模板创建出来的其他实例。
通过 `Vue.extend` 方法可以用来生成新的 Vue 组件类。每当执行一次此操作都会返回一个新的组件构造器,即使我们重复调用相同的参数也是如此。
在 Vue 中使用任何标签都可以添加一个名为 `ref` 的属性来标识这个特定的元素或组件,并且可以在其他地方便捷地引用它。
props 是一种用于父级向子级传递数据的方式。这种方式使得复用同一组件成为可能,因为不同的实例可以接收并展示不同的数据集。但是需要注意的是,在 script 标签里使用 `this.变量名` 引用 props 接收的数据时,如果尝试修改其值会触发控制台警告。
scope 属性允许我们在容器标签或样式中添加特定的标识符,并根据这些标识符来应用相应的 CSS 规则或者 JavaScript 逻辑。
组件之间的通信可以通过多种方式进行。例如:父级向子级传递数据可以使用 props;而从子级到父级的数据传递通常通过自定义事件实现;对于任意两个不具有直接父子关系的组件,我们可以采用全局事件总线或发布订阅模式来完成信息交换。
插槽是一种允许父组件将自身的结构插入到子组件内部指定位置的技术。其中作用域插槽更进一步地支持了从子向父传递数据的需求,并且要求使用 `` 结构进行接收处理。
路由参数有两种主要方式:Query 和 Params 。前者通常用于简单的查询字符串,而后者则适用于需要在 URL 中保留的特定标识符。
计算属性是基于依赖的数据动态生成的结果。相比之下,监测属性主要用于监听变化并执行相应的回调函数,在列表过滤等场景中非常有用。
`v-model` 是一个双向绑定指令,常被应用于表单元素或输入框控件上以实现数据收集的功能。
Vue 实例和组件实例的概念有所不同:前者代表整个 Vue 应用的根节点;后者则是指特定于某个模块或者功能区块的小范围对象实例。
Vue 提供了内置指令(如 `v-bind` 和 `v-model`)以及自定义指令来满足不同的开发需求。另外,通过 minin 可以快速搭建起一个基本的 Vue 项目框架。
todolist 编辑功能可以利用事件监听器比如 @blur 来在用户失去焦点时执行相应的业务逻辑操作。
Vue3 中新增加了对 watch 的支持,它允许开发者实时监控数据的变化并采取相应行动。
Vue 框架的一大特点就是声明式编程思想。这种模式下我们可以通过简单的模板语法来描述界面的构成,并且 Vue 还提供了诸如路由管理和状态管理等实用工具库以简化开发流程。
在编写 Vue 应用时,会频繁使用到如 `v-bind` 和 `v-model` 等指令以及它们各自的属性和值。这些都属于 Vue 的模板语法的一部分内容。
对于 `el` 和 `data` 这些配置项来说,在定义一个新组件或应用实例的时候可以选择不同的实现方式:例如可以为 el 设置字符串形式的DOM选择器或者对象形式的选择规则;而 data 则既可以是函数返回的对象也可以直接提供一个初始状态字典。
Vue 的核心架构基于 MVVM(Model-View-ViewModel)模式,它将数据处理逻辑(Model)、界面展示(View)和两者之间的桥梁层( ViewModel )明确区分开来。此外,在 JavaScript 中使用 `Object.defineProperty` 方法可以用来定义或修改对象的属性描述符。
全部评论 (0)


