Vue3 setup快速使用体验

hi，我是温新，一名PHPer

• 1、setup函数在beforeCreate和Created之前执行；
• 2、执行setup时，组件实例没有被创建，因此无法在setup内部使用this；
• 3、setup 选项是一个接收 props 和 context 的函数；
• 4、与模板组合数据使用时，必须return一个对象将数据暴露给外部使用；

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">div</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">id</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"app"</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">button</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">@</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">click</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"testClick"</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span>{{ <span style="box-sizing: border-box;color: rgb(0, 0, 0)">webName</span> }}<span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(255, 85, 0)">/button></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(255, 85, 0)">/div></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">script</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box;color: rgb(119, 0, 136)">const</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">app</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Vue</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">createApp</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box;color: rgb(0, 0, 0)">setup</span>(<span style="box-sizing: border-box;color: rgb(0, 0, 255)">props</span>, <span style="box-sizing: border-box;color: rgb(0, 0, 255)">context</span>) {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// return 一个对象</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                <span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(0, 0, 0)">webName</span>: <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'自如初'</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                    <span style="box-sizing: border-box;color: rgb(0, 0, 0)">testClick</span>: () <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                        <span style="box-sizing: border-box;color: rgb(0, 0, 0)">alert</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'方法在setup中'</span>)</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                    }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">                }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        });</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">app</span>.<span style="box-sizing: border-box;color: rgb(0, 0, 0)">mount</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'#app'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(255, 85, 0)">/script></span></span>

我是温新

每天进步一点，就一点点