vue实现项目的渲染
Vue 项目渲染的实现方式
Vue 项目的渲染可以通过多种方式实现，包括客户端渲染（CSR）、服务端渲染（SSR）和静态站点生成（SSG）。以下是常见的实现方法：
客户端渲染（CSR）
客户端渲染是 Vue 的默认渲染模式，通过浏览器加载 Vue 应用后动态生成 DOM。
// main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')在 CSR 中，Vue 应用的初始 HTML 是一个空容器，JavaScript 加载后才会渲染内容。
服务端渲染（SSR）
服务端渲染通过 Vue Server Renderer 在服务器端生成完整的 HTML 发送给客户端。
// server.js
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) => {
const app = new Vue({
data: {
url: req.url
},
template: `<div>访问的 URL 是： {{ url }}</div>`
})
renderer.renderToString(app, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error')
return
}
res.end(`
<!DOCTYPE html>
<html lang="en">
<head><title>SSR Example</title></head>
<body>${html}</body>
</html>
`)
})
})
server.listen(8080)静态站点生成（SSG）
使用 VuePress 或 Nuxt.js 可以生成静态 HTML 文件。
# 使用 VuePress
npm install -D vuepress
mkdir docs
echo '# Hello VuePress' > docs/README.md在 docs/.vuepress/config.js 中配置站点：
module.exports = {
title: 'VuePress Site',
description: 'Static site generated with VuePress'
}混合渲染
Nuxt.js 提供了混合渲染能力，允许对某些路由使用 SSR，其他使用 CSR 或 SSG。
// nuxt.config.js
export default {
target: 'static', // 或 'server' 用于 SSR
generate: {
routes: ['/static-page']
}
}渲染优化技巧
-
使用
v-if和v-show合理控制渲染
<div v-if="shouldRender">条件渲染内容</div> <div v-show="isVisible">显示/隐藏内容</div> -
对于长列表使用
v-for配合key<ul> <li v-for="item in items" :key="item.id">{{ item.text }}</li> </ul> -
使用异步组件延迟加载
const AsyncComponent = () => ({ component: import('./MyComponent.vue'), loading: LoadingComponent, error: ErrorComponent, delay: 200, timeout: 3000 }) -
合理使用计算属性缓存结果
computed: { filteredList() { return this.list.filter(item => item.active) } }
性能监控
可以通过 Vue 的 config.performance 选项启用开发模式下的性能监控：
Vue.config.performance = true这将帮助识别组件渲染的耗时情况。生产环境中可以使用 Web Vitals 或 Lighthouse 进行性能评估。
