第2章 Hello World与Vue3基础特性

第2章

HelloWorld与Vue3基础特性2.1Vue3实例创建createApp(RootComponent)mount('#app')mount(:应用实例方法,挂载应用到DOMVue:Vue3库的全局对象createApp(:新增全局方法,创建应用实例'#app':CSS选择器,指定挂载目标元素RootComponent:根组件对象(含data、methods、template)constvm=:保存应用实例引用作用:创建Vue3应用实例并指定根组件作用:将Vue3应用挂载到指定DOM元素每个Vue3应用都从createApp(开始,一个页面可创建多个独立应用实例组件实例(vm)应用实例挂载机制每个Vue3应用从createApp0开始挂载前:组件未初始化,模板未渲染vm.sdata:响应式数据对象一个页面可创建多个独立应用实例挂载后:生成响应式系统,渲染DOMvm.Sprops:接收的props一个应用实例只能挂载一个DOM挂载点元素内容被Vue生成的DOM替换vm.Sel:根DOM元素挂载后生成响应式系统,渲染DOM实现数据的双向绑定提供对组件所有属性和方法的访问应用实例管理全局配置,组件实例提供属性方法访问2.1Vue3实例创建响应式系统原理Vue2vsVue3对比创建方法:newVue(})→Vue.createApp(0)data选项必须为函数,返回普通JavaScript对象调用方式:Smount("#app')→.mount("#app")Vue3使用Proxy代理(Vue2用Object.defineProperty)结果:直接获得组件实例→获得应用实例依赖追踪:模板访问数据时,代理记录属性→依赖方映射3避免全局配置污染,链式调用更简洁,支持多个根实例Vue变更通知:数据修改时,代理精确触发依赖更新实现数据变动时视图的自动同步更新Proxy代理拦截get/set操作,实现精准的依赖追踪与变更通知2.1Vue3实例创建Vue3

程序执行流程步骤1步骤4步骤2步骤3步骤5步骤6步骤7建立响应式系统创建根组件对象渲染初始视图调用Vue.createApp查找DOM元素#app编译模板加载Vue库将模板编译为高效的虚拟DOM渲染函数创建和插入DOM节点,生成响应式系统代理拦截数通过CDN引入或模块导入Vue3库定义app对象,包含data、metthods等选项,data必须为函数,返回普通对象传入根组件对象,创建应用实例通过CSS选择器定位挂载目标元素据访问与修改,实现双向绑定编译时优化模板+运行时精准更新=原生级渲染性能2.1Vue3实例创建2.2

Vue3生命周期销毁阶段更新阶段挂载阶段创建阶段beforeUnmount实例销毁前,仍可访问数据和DOMbeforeCreate→实例初始化,响应式系统和事件机制建立前created→响应式数据初始化完成可访问data和methodsbeforeMount模板编译完成,DOM挂载前mounted→DOM挂载完成,可操作DOM节点beforeUpdate-数据变更后,虚拟DOM重新渲染前updated→DOM重渲染完成unmounted-)实例销毁完成,所有绑定解除钩子函数均为同步事件,this自动绑定当前组件实例,禁止使用箭头函数定义2.2.1认识生命周期2.2.2

生命周期钩子函数beforeCreateeCreatecreated时机:实例初始化后,响应式系统和事件机制建立前时机:响应式数据初始化完成后,DOM挂载前能力边界:无法访问data/computed和methods,this.Sel为undefined能力边界:可访问data/computed和methods,this.$el仍为undefined适用场景:执行数据相关的初始化逻辑适用场景:执行与组件状态无关的初始化逻辑典型应用:发起APi请求获取数据、初始化第三方库、设置定时器典型应用:在根实例设置全局加载状态注意事项:避免操作实例数据或DOM注意事项:避免操作DOM节点beforeCreate无数据访问权,created有数据访问权但无DOM访问权beforeMountmounted时机:模板编译完成后,DOM挂载前能力边界:可访问data/computed和methods,this.时机:DOM挂载完成后能力边界:可访问data/computed、methods和渲染完成的DOM节点,this.$el指向根元素执行DOM相关操作初始化图表库、绑定原生事件监听、获取元素尺寸避免同步修改响应式数据导致循环更新$el仍为undefined适用场景:典型应用:适用场景:执行最后的数据预处理逻辑典型应用:修改即将渲染的数据、初始化不依赖DOM的第三方库注意事项:注意事项:避免操作真实DOM节点beforeMount可预处理数据,mounted可操作DOM2.2.2

生命周期钩子函数beforeUpdateupdated时机:数据变更导致的DOM重渲染完成后;能力:可访问更新后的数据和最新DOM结构;时机:响应式数据变更后,虚拟DOM重新渲染前;能力:可访问更新后数据,DOM反映旧视图状态;应用:记录滚动位置、保存当前表单状态;注意:禁止修改响应式数据,避免无限循环应用:根据新DOM调整第三方库、触发动画效果;注意:谨慎操作数据,易导致递归更新beforeUnmountunmounted时机:实例销毁完成后;能力:所有绑定已解除,this.$el为null;应用:记录销毁日志、释放非响应式资源;注意:无法再访问实例数据或方法时机:实例销毁前;能力:仍可访问响应式数据和DOM节点;应用:移除事件监听、清除定时器、取消网络请求;注意:避免修改数据或触发新渲染2.2.2

生命周期钩子函数2.3数据绑定…Mustache双大括号语法最简单常用的数据绑定方法,{msg]标签被替代为响应式对象值数据改变时插值处内容自动更新示例:Message:{msg}j执行一次性插值,数据改变后内容不更新V-once指令适用于静态内容场景示例:不会改变:{msg]j响应式验证在控制台修改vm.msg的值,页面文字立刻更新体现了Vue3响应式系统的数据驱动视图特性Mustache实现响应式绑定,V-once实现一次性渲染2.3.1文本插值JavaScript表达式支持v-html指令与v-bind指令v-html:输出真正的HTML内容,span内容被替换为原始HTML支持的表达式:{{number+1}}算术运算{ok?"YES":"NO"}三元表达式{{message.split(").reverse().join(")}方法链调用注意:v-html忽略Vue数据绑定,不能用于组合局部模板v-bind:绑定HTML属性,语法v-bind:id=""list-"+id"字符串拼接v-bind:id="dynamicld"不支持:语句(如vara=1)、流控制(如布尔attribute:值为null/undefined/false时属性不渲染if语句)每个绑定只能包含单个表达式示例:v-bind:disabled="isButtonDisabled"表达式在所属实例作用域下作为JavaScript语句被解析2.4案例登录页面实现通过createApp创建Vue实例,data返回页面文本数据使用Mustache语法绑定标题、标签等文本内容页面结构包含登录标题区、用户名输入框、密码输入框功能项包含记住我复选框、忘记密码链接、登录按钮data选项必须为函数,返回普通Jav