解析vue中的$mount

下面为你详细讲解解析Vue中的$mount的完整攻略：

1.概述

$mount是Vue实例化后挂载到DOM节点的入口函数，用于手动挂载不适用于el选项的情况。
根据不同的使用场景，$mount呈现出不同的表现，如Static Rendering、Client Side Rendering、Server Side Rendering等.
在解析$mount之前，需要先了解Vue的生命周期函数，以及Vue的响应式原理。

2.$mount的语法

$mount方法可以接收一个选择器（CSS选择器），也可以接收一个DOM节点。

//接收选择器
let vm = new Vue({
  ...
})
vm.$mount('#app')
//接收DOM节点
let app = document.getElementById('app')
let vm = new Vue({
  ...
})
vm.$mount(app)

3.$mount的使用场景

3.1 静态渲染

当我们通过Vue的template选项进行静态页面渲染时，需要手动使用$mount进行挂载。

<div id='app'></div>
<script>
let vm = new Vue({
  template:'#app',
  data:{
    msg:'hello'
  }
})
vm.$mount('#app')
</script>

3.2 客户端渲染

应用程序部署在客户端上，采用SPA单页应用，通过vue-router路由进行跳转，当路由与当前URL匹配时，挂载组件。

const Home = {
  template: '<div>Home</div>'
}
const Foo = {
  template: '<div>Foo</div>'
}
const routes = {
  '/': Home,
  '/foo': Foo
}
const router = new VueRouter({
  routes
})
new Vue({
  router
}).$mount('#app')

3.3 服务端渲染

服务端渲染的核心是在服务器上直接渲染返回HTML字符串，达到首屏快速渲染。

//服务端渲染代码
const Vue = require('vue')
const server = require('express')()
server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>访问的URL是：{{ url }}</div>`
  })
  const renderer = require('vue-server-renderer').createRenderer()
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
      <head><title>Hello</title></head>
      <body>${html}</body>
      </html>
    `)
  })
})

//客户端激活代码
const Vue = require('vue')
const app = new Vue({
  template: `<div>访问的URL是：{{ url }}</div>`
})
app.$mount('#app')

以上就是解析Vue中$mount的完整攻略，希望能够对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：解析vue中的$mount - Python技术站