监控网站模版,手机网站如何做优化,网站开发代理招商,个人网站怎么建立流程一、Vue 3 基础搭建与核心语法
1.创建 Vue 3 应用
在项目的入口文件 main.js 中#xff0c;通过以下代码创建 Vue 3 应用实例#xff1a;
import { createApp } from vue;
import App from ./App.vue;const app createApp(App);
app.mount(#app); 这几行代码的作用是引入…一、Vue 3 基础搭建与核心语法
1.创建 Vue 3 应用
在项目的入口文件 main.js 中通过以下代码创建 Vue 3 应用实例
import { createApp } from vue;
import App from ./App.vue;const app createApp(App);
app.mount(#app); 这几行代码的作用是引入 createApp 函数创建一个应用实例并将 App.vue 挂载到页面上指定的 #app 元素。
2.组合式 API
Vue 3 引入了 组合式 APIComposition API提供了更灵活的逻辑复用方式。
组合逻辑Composition API 提供了一种新的方式来组织和复用逻辑代码。它允许开发者以函数的形式定义组件的逻辑而不是像 Options API 那样分散在 data、methods、computed 等选项中。生命周期钩子如 onMounted, onUnmounted 等等与 Options API 中的生命周期钩子相对应但更灵活可以自由组合。 setup组件的入口函数用于定义响应式数据、计算属性、方法等。
script setup
import { ref, onMounted } from vue;const message ref(Hello World);onMounted(() {console.log(Component is mounted!);
});
/scripttemplatep{{ message }}/p
/template
import { ref, onMounted } from vue;export default {setup() {const count ref(0);onMounted(() {console.log(Component mounted);});return {count,};},
};
3.script setup 语法
script setup 是 Vue 3 提供的重要语法糖极大地简化了组件的代码结构。在该语法下模块顶层的代码会自动编译到 setup() 函数中无需显式定义 setup 函数。
二、响应式原理与数据处理
Vue 3 使用 Proxy 实现响应式系统Vue 3 使用 Proxy 替代了 Vue 的 Object.defineProperty实现了更强大的响应式系统。
1.ref 和 reactive
ref 和 reactiveref 用于创建简单的响应式引用而 reactive 则用来处理对象。对于数组和对象建议使用 reactive。.value 访问器当使用 ref 创建的响应式引用时需要通过 .value 来读取或设置其内部值。
script setup
import { ref, reactive } from vue;// 使用 ref 创建基本类型响应式变量
const count ref(0);// 使用 reactive 创建复杂类型的响应式对象
const state reactive({name: Vue,version: 3,
});function increment() {count.value;
}
/scripttemplatedivpCount is {{ count }}/pbutton clickincrementIncrement/buttonpName is {{ state.name }}, Version is {{ state.version }}/p/div
/template
2.toRefs
toRefs 函数用于将一个响应式对象转换为普通对象其中每个属性都转换为一个 ref这样在解构响应式对象时能够保持其响应性。
templatedivp姓名: {{ name }}/pp年龄: {{ age }}/p/div
/templatescript setup
import { reactive, toRefs } from vue;const person reactive({name: 王五,age: 30
});const { name, age } toRefs(person);
/script 三、组件化开发
1.组件定义与使用
Vue 3 使用 .vue 文件来定义组件包含 template、script 和 style 三个部分。
templatedivp{{ message }}/pbutton clickincrementIncrement/button/div
/templatescript
import { ref } from vue;export default {setup() {const message ref(Hello, Vue 3!);const increment () {message.value !;};return {message,increment,};},
};
/scriptstyle scoped
p {color: blue;
}
/style
使用 script setup 定义组件十分便捷只需在 script setup 标签内编写逻辑代码在 template 标签内编写模板内容。
// 子组件 Child.vue
templatedivp这是一个子组件/p/div
/templatescript setup
// 这里可以定义子组件的逻辑
/script
在父组件中使用子组件时先导入子组件然后在模板中直接使用子组件标签即可。
// 父组件 Parent.vue
templatedivChild //div
/templatescript setup
import Child from ./Child.vue;
/script
2.组件通信 Props父组件向子组件传递数据。 事件子组件向父组件传递数据。
父传子
通过 props 实现父组件向子组件传递数据。
// 父组件 Parent.vue
templatedivChildComponent :messageparentMessage //div
/templatescript setup
import ChildComponent from ./ChildComponent.vue;
const parentMessage 父组件传递的信息;
/script
// 子组件 ChildComponent.vue
templatedivp{{ message }}/p/div
/templatescript setup
const props defineProps([message]);
/script
子传父
子组件通过 emit 触发事件向父组件传递数据。
// 子组件 Child.vue
templatedivbutton clicksendDataToParent传递数据给父组件/button/div
/templatescript setup
import { defineEmits } from vue;const emits defineEmits([dataFromChild]);
const sendDataToParent () {emits(dataFromChild, 子组件的数据);
};
/script
// 父组件 Parent.vue
templatedivChild dataFromChildhandleDataFromChild //div
/templatescript setup
import Child from ./Child.vue;const handleDataFromChild (data) {console.log(接收到子组件的数据:, data);
};
/script
兄弟组件通信
兄弟组件通信通常借助事件总线或状态管理库如 Pinia来实现。事件总线可以通过创建一个空的 Vue 实例来作为事件中心兄弟组件通过这个实例来触发和监听事件。使用 Pinia 时将共享的数据存储在 Pinia 的 store 中兄弟组件都可以访问和修改这个 store 中的数据。 3.插槽
匿名插槽
父组件可以在子组件标签内插入内容子组件通过 slot 标签渲染这些内容。
// 父组件 Parent.vue
templatedivChildComponentp这是插入到子组件的匿名插槽内容/p/ChildComponent/div
/templatescript setup
import ChildComponent from ./ChildComponent.vue;
/script
// 子组件 ChildComponent.vue
templatedivslot/slot/div
/templatescript setup
/script
具名插槽
父组件可以通过 template 标签和 #name 语法指定插槽名称子组件通过 slot namexxx 渲染对应的内容。
// 父组件 Parent.vue
templatedivChildComponenttemplate #headerh1这是头部插槽内容/h1/templatetemplate #contentp这是内容插槽内容/p/template/ChildComponent/div
/templatescript setup
import ChildComponent from ./ChildComponent.vue;
/script
// 子组件 ChildComponent.vue
templatedivslot nameheader/slotslot namecontent/slot/div
/templatescript setup
/script
四、生命周期管理 在 script setup 中可以方便地使用各种生命周期钩子函数这些钩子函数在组件的不同阶段被调用。
templatedivp组件内容/p/div
/templatescript setup
import { onMounted, onUpdated, onUnmounted } from vue;onMounted(() {console.log(组件已挂载);
});onUpdated(() {console.log(组件已更新);
});onUnmounted(() {console.log(组件已卸载);
});
/script
onMounted 在组件挂载完成后调用可用于初始化数据、获取 DOM 元素等操作onUpdated 在组件更新后调用可用于在数据更新后执行一些额外的逻辑onUnmounted 在组件卸载时调用可用于清理定时器、解绑事件等操作。
五、计算属性与监听器
1.计算属性
计算属性是基于响应式数据的缓存值只有当它所依赖的响应式数据发生变化时才会重新计算。
templatedivp原始数字: {{ number }}/pp加倍后的数字: {{ doubleNumber }}/p/div
/templatescript setup
import { ref, computed } from vue;const number ref(10);
const doubleNumber computed(() number.value * 2);
/script
在这个例子中doubleNumber 是一个计算属性依赖于 number 的值。当 number 变化时doubleNumber 会自动重新计算。
2.监听器
监听器用于监听响应式数据的变化并在数据变化时执行相应的操作。
templatedivinput v-modelinputValue //div
/templatescript setup
import { ref, watch } from vue;const inputValue ref();
watch(inputValue, (newValue, oldValue) {console.log(新值:, newValue, 旧值:, oldValue);
});
/script
上述代码中通过 watch 监听 inputValue 的变化当 inputValue 改变时会在控制台打印出新值和旧值。
六、指令系统
1.内置指令
v-model
v-model 用于表单元素的双向数据绑定使得表单元素的值与响应式数据保持同步。
templatedivinput v-modelinputText /p输入的内容: {{ inputText }}/p/div
/templatescript setup
import { ref } from vue;const inputText ref();
/script
v-if、v-else、v-else-if
这些指令用于条件渲染根据表达式的真假来决定是否渲染相应的内容。
templatedivp v-ifisShow显示的内容/pp v-else不显示的内容/p/div
/templatescript setup
import { ref } from vue;const isShow ref(true);
/script
v-for
v-for 用于列表渲染通过遍历数组或对象来渲染多个元素。
templatedivulli v-for(item, index) in list :keyindex{{ item }}/li/ul/div
/templatescript setup
import { ref } from vue;const list ref([苹果, 香蕉, 橙子]);
/script
v-bind
v-bind 可以缩写为 :用于动态绑定 HTML 属性使属性值根据响应式数据的变化而变化。
templatedivimg :srcimageUrl :altimageAlt //div
/templatescript setup
import { ref } from vue;const imageUrl ref(path/to/image.jpg);
const imageAlt ref(描述图片);
/script
v-on
v-on 可以缩写为 用于绑定事件监听器当事件触发时执行相应的函数。
templatedivbutton clickhandleClick点击我/button/div
/templatescript setup
const handleClick () {console.log(按钮被点击了);
};
/script
2.自定义指令
自定义指令可以扩展 Vue 的功能通过 directive 函数来定义。
templatedivinput v-focus //div
/templatescript setup
import { directive } from vue;const vFocus directive(focus, {mounted(el) {el.focus();}
});
/script
上述代码定义了一个自定义指令 v-focus当组件挂载时会自动将焦点设置在使用该指令的输入框上。
七、状态管理Pinia
Vue 3 推荐使用 Pinia 作为状态管理库。
1.安装与引入
首先通过 npm install pinia 安装 Pinia然后在 main.js 中引入并使用
import { createApp } from vue;
import { createPinia } from pinia;
import App from ./App.vue;const pinia createPinia();
const app createApp(App);
app.use(pinia);
app.mount(#app);
2.创建 Store
使用 defineStore 函数定义一个 store用于存储和管理应用的状态。
// store/counter.js
import { defineStore } from pinia;export const useCounterStore defineStore(counter, {state: () ({count: 0}),actions: {increment() {this.count;}}
});
3.在组件中使用 Store
在组件中通过 useCounterStore 函数来访问和使用 store 中的状态和方法。
templatedivp计数器: {{ counterStore.count }}/pbutton clickcounterStore.increment增加/button/div
/templatescript setup
import { useCounterStore } from ./store/counter.js;const counterStore useCounterStore();
/script
八、路由管理Vue Router
1.安装与配置
通过 npm install vue-router 安装 Vue Router然后在 router/index.js 中配置路由
import { createRouter, createWebHistory } from vue-router
import HomeView from ../views/HomeView.vueconst router createRouter({// 配置使用history模式history: createWebHistory(import.meta.env.BASE_URL),// 定义路由规则routes: [{path: /, // 路由名称name: home,component: HomeView // 同步组件},{path: /about,name: about,// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () import(../views/AboutView.vue) // 异步组件}]
})export default router
2.动态路由和嵌套路由 动态路由通过 :id 定义动态路径参数。 嵌套路由通过 children 定义嵌套路由。
const routes [{path: /user/:id,component: User,children: [{ path: profile, component: Profile },{ path: posts, component: Posts },],},
];
3.在 main.js 中引入路由
在 main.js 中引入配置好的路由
import { createApp } from vue
import App from ./App.vue
import router from ./routerconst app createApp(App)app.use(router)app.mount(#app)
3.在组件中使用路由
在组件中可以使用 router-link 来创建导航链接使用 router-view 来显示当前路由对应的组件。
script setup
// RouterLink是一个组件
// RouterView也是一个组件
import { RouterLink, RouterView } from vue-router
/scripttemplate!-- 配置路由出口 --navrouter-link to/Home/router-linkrouter-link to/aboutAbout/router-link/navmainrouter-view/router-view/main
/templatestyle scoped
nav {display: flex;width: 200px;
}
nav a {flex: 1;
}
main {width: 400px;height: 200px;border: 1px solid #ccc;
}
/style九、性能优化
1 懒加载 组件懒加载使用 defineAsyncComponent 或 import() 动态加载组件。 路由懒加载使用 import() 动态加载路由组件。
const Home defineAsyncComponent(() import(./views/Home.vue));
2 代码拆分 使用 Webpack 或 Vite 的代码拆分功能将代码分割成多个 chunk。
3 缓存组件 使用 keep-alive 缓存组件状态避免重复渲染。
keep-aliverouter-view /
/keep-alive
4.Teleport
传送内容到DOM的不同位置允许你把组件的内容“传送”到应用程序中的任意位置而不受组件层级结构的限制。这对于模态框、提示信息等场景特别有用。
teleport tobody!-- 这里的内容会被插入到 body 元素中 --div idmodal.../div
/teleport
5.Transition 组件增强
TransitionGroup 和 Transition提供了更强大的过渡效果控制包括列表动画等功能。
6. Suspense
异步组件加载允许你在等待异步依赖如从服务器获取数据时展示占位符内容直到所需资源准备好为止。
suspensetemplate #defaultAsyncComponent //templatetemplate #fallbackLoading.../template
/suspense
十、最佳实践
1 组件设计 单一职责每个组件只负责一个功能。 Props 验证使用 props 的 type 和 validator 进行数据验证。
export default {props: {message: {type: String,required: true,validator: (value) value.length 0,},},
};
2 代码风格 使用组合式 API 组织逻辑。 使用 ref 和 reactive 定义响应式数据。 使用 computed 和 watch 处理复杂逻辑。
3 错误处理 使用 try...catch 捕获异步错误。 使用全局错误处理函数捕获未处理的异常。
app.config.errorHandler (err, vm, info) {console.error(Global error:, err);
};
十一、 工具链
1 Vite
Vite 是 Vue 3 的推荐构建工具支持快速开发和热更新。
2 Vue DevTools
Vue DevTools 是浏览器扩展用于调试 Vue 应用。
十二、测试
1 单元测试
使用 Jest 或 Vitest 进行单元测试。
import { mount } from vue/test-utils;
import MyComponent from ./MyComponent.vue;test(renders correctly, () {const wrapper mount(MyComponent);expect(wrapper.text()).toContain(Hello, Vue 3!);
});
2 端到端测试
使用 Cypress 进行端到端测试。
describe(MyComponent, () {it(renders correctly, () {cy.visit(/);cy.contains(Hello, Vue 3!);});
});
十三、TypeScript 支持
内置对 TypeScript 的友好支持包括类型推断、类型检查以及更好的开发体验。Composition API 特别适合 TypeScript因为它提供了更明确的类型定义。
templatep{{ message }}/p
/templatescript setup langts
import { ref } from vue;const message refstring(Hello, Vue 3 with TypeScript!);
/script
