petite?vue的使用示例詳解

更新時(shí)間：2022年11月23日 14:16:12 作者：你的心上進(jìn)

這篇文章主要為大家介紹了petite?vue的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

題引：

這幾天在公司沒事做，于是上網(wǎng)看看有關(guān)vue的文章，忽然看到尤大大的一個(gè)文章：只有5kb大小的mini vue，好家伙，又整活了，這不得沖一沖嘛。

特征及使用：

petite-vue體積更小，約5bk；
對(duì)漸進(jìn)的增強(qiáng)更加的明顯，特別是運(yùn)用在服務(wù)端渲染的頁(yè)面上更是便捷。系統(tǒng)看了一下，語(yǔ)法跟vue的語(yǔ)法絕大部分是一樣了，除了增加了一些新的語(yǔ)法糖；
基于reactive進(jìn)行響應(yīng)式

petite-vue的引用方式有幾種，但在舉例之前，先講一下特有的語(yǔ)法：
v-scope：用于標(biāo)記被petite-vue控制的區(qū)域，里面可以定義變量,且可以在控制區(qū)域內(nèi)進(jìn)行使用。

1. CDN引入:

<!-- 正常的CDN引入 -->
<div
  v-scope="{ upVotes: 0, downVotes: 0 }"
  @vue:mounted="console.log('mounted on: ', $el)"
  @vue:unmounted="console.log('unmounted: ', $el)"
>
  <p>{{ upVotes }} <button @click="upVotes++">&#128077;</button></p>
  <p>{{ downVotes }} <button @click="downVotes++">&#128078;</button></p>
</div>
<div v-scope="{ test:1,test1:2}">
  <p v-effect="$el.textContent=test" v-show="test == 2"></p>
  <p v-effect="$el.textContent=test1" @click="console.log(1123)"></p>
</div>
<div v-scope="{ array:[1,2,3,4,5,6],obj:1 }">
  <div v-for="item in array">{{item}}</div>
</div>
<script src="https://unpkg.com/petite-vue" defer init></script>

效果圖：

總結(jié)：在CDN引入的時(shí)候，需要在script標(biāo)簽加init屬性，因?yàn)樵搶傩詴?huì)進(jìn)行初始化操作，比如引入和調(diào)用createApp函數(shù)及掛載v-scope區(qū)域。

2.module引入

<!-- module引入方式 -->
<div v-scope>
    {{count}}<div>{{count}}</div>{{count}}
</div>
<script type="module">
    import { createApp } from "https://unpkg.com/petite-vue?module"
    createApp({
        count: 10,
        get plusOne() {
            return this.count + 1;
        },
        increment() {
            this.count++;
        }
    }).mount()
</script>

效果圖：

總結(jié)：使用module引入的時(shí)候，我們需要從線上地址引入createApp并進(jìn)行掛載，內(nèi)部會(huì)查找有v-scope屬性的標(biāo)簽并進(jìn)行正則匹配，這跟vue3的創(chuàng)建方式很像。

3. 組件化

既然petite-vue繼承了vue的絕大部分特性，那么當(dāng)然也可以使用組件化的方式來使用

<div v-scope="About({count:2})">
    <p>{{count}}</p>
    <button @click="inc">increment</button>
</div>   
<div v-scope="Home({count:1})">
    <p>{{count}}</p>
    <button @click="inc">increment</button>
</div>
<script type="module">
    import { createApp } from "https://unpkg.com/petite-vue?module";
    function Home(props) {
        return {
            count: props.count,
            inc() {
                this.count++;
            }
        }
    }
    function About(props) {
        return {
            count: props.count,
            inc() {
                this.count++;
            }
        }
    }
    createApp({
        Home,
        About
    }).mount();
</script>

效果圖：

總結(jié)：其實(shí)這就跟CDN引入的方式很像，我們把v-scope綁定的變量注冊(cè)在createApp里，并使用函數(shù)的方式，那么在v-scope綁定的地方都可以使用這些函數(shù)。當(dāng)我們調(diào)用的時(shí)候返回一個(gè)對(duì)象，就跟我們直接v-scope="{xxx:xxx}"一樣，擴(kuò)展性還更高

4. 模板組件

我們可以發(fā)現(xiàn)，組件化的例子中：Home和About組件的不同之處就是參數(shù)不同，模板是一樣的。那么我們可以使用vue中的template的思路，通過$template指定模板來進(jìn)行優(yōu)化。

<!-- 模板組件 -->
<template id="counter-template">
    <div>
        my count is {{count}}
    </div>
</template>
<div v-scope="Counter({count:13})"></div>
<div v-scope="Counter({count:14})"></div>
<script type="module">
  import { createApp } from "https://unpkg.com/petite-vue?module";
    function Counter(props){
        return{
            $template:"#counter-template",
            count:props.count,
            inc(){
                this.count++
            }
        }
    }
    createApp({
        Counter
    }).mount()
</script>

效果圖：