Vue3将虚拟节点渲染到网页初次渲染详解

在Vue3中，将虚拟节点渲染到网页上，是在createApp的过程中完成的。具体的过程如下：

创建Vue实例

我们可以使用createApp方法创建Vue实例，如下：

const app = Vue.createApp({
  // Options
})

createApp方法中的参数可以传入一个普通的JavaScript对象，Vue会将其转化为Vue组件，获取数据和渲染视图。

定义Vue组件

在Vue组件中，组件数据和模板是分开的。模板中的数据是从组件实例的数据中获取的，并且在组件中，数据是以对象的形式存储的，如下：

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
})

在Vue3中，我们可以使用setup方法来声明组件中的数据和方法。setup方法中返回的对象，是组件中的数据和方法，如下：

const app = Vue.createApp({
  setup() {
    const message = Vue.ref('Hello Vue!')
    return {
      message
    }
  }
})

Vue.ref可以创建一个响应式的数据，当数据发生变化时，视图也会自动更新。

渲染Vue组件

创建Vue实例之后，需要将其渲染到网页上，可以使用mount方法，如下：

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
})
app.mount('#app')

mount方法的参数可以是一个DOM元素或者选择器字符串。Vue会在这个元素的内部，渲染组件的模板。

示例一

我们来看一个简单的例子，用Vue3将文本框的值渲染到页面上。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue3示例</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="message">
      <p>{{ message }}</p>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
      const app = Vue.createApp({
        setup() {
          const message = Vue.ref('')
          return {
            message
          }
        }
      })
      app.mount('#app')
    </script>
  </body>
</html>

在这个例子中，我们使用了v-model指令来实现双向绑定。当文本框的值发生变化时，视图也会自动更新。

示例二

我们来看一个更复杂的例子，用Vue3实现一个购物车，实现添加商品、增加数量和计算总价的功能。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue3示例</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="(item, index) in cart" :key="index">
          <span>{{ item.name }}</span>
          <span>x{{ item.quantity }}</span>
          <button @click="addItem(index)">+</button>
          <button @click="removeItem(index)">-</button>
          <span>{{ item.price * item.quantity }}元</span>
        </li>
      </ul>
      <p>总价：{{ total }}元</p>
      <button @click="addProduct">添加商品</button>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
      const app = Vue.createApp({
        setup() {
          const cart = Vue.ref([
            { name: 'iPhone', price: 6999, quantity: 1 },
            { name: 'iPad', price: 4999, quantity: 2 }
          ])

          const total = Vue.computed(() => {
            return cart.value.reduce((sum, item) => {
              return sum + item.price * item.quantity
            }, 0)
          })

          const addProduct = () => {
            cart.value.push({ name: 'MacBook', price: 10999, quantity: 1 })
          }

          const addItem = (index) => {
            cart.value[index].quantity++
          }

          const removeItem = (index) => {
            if (cart.value[index].quantity > 1) {
              cart.value[index].quantity--
            }
          }

          return {
            cart,
            total,
            addProduct,
            addItem,
            removeItem
          }
        }
      })
      app.mount('#app')
    </script>
  </body>
</html>

在这个例子中，我们使用了v-for指令来循环渲染购物车中的商品。我们还使用了computed方法来计算购物车的总价。我们还通过按钮的点击事件，实现了添加商品、增加数量和减少数量的功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue3将虚拟节点渲染到网页初次渲染详解 - Python技术站