当前位置:首页 » 《随便一记》 » 正文

vue3学习之路_高桥靓仔的博客

14 人参与  2021年11月17日 14:23  分类 : 《随便一记》  评论

点击全文阅读


一、cdn引入基本使用

  1. template的写法
  2. data属性必须是函数
  3. 计算属性的使用
  4. 其他属性(props、watch、emits、setup、生命周期等)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3_CND引入</title>
</head>

<body>
  <div id="app">呵呵哈哈哈</div>

  <!-- 
    方式1:
    <script type="x-template" id="template">
      <h2>{{num}}</h2>
      <h2>{{computeNum}}</h2>
      <button @click="add">+</button>
      <button @click="sub">-</button>
    </script>
 -->

  <!-- 方式2: (https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/template)-->
  <template id="template">
    <h2>{{num}}</h2>
    <h2>{{computeNum}}</h2>
    <button @click="add">+</button>
    <button @click="sub">-</button>
  </template>

  <script src="https://unpkg.com/vue@next"></script>

  <script>
    const data = {
      template: '#template',
      data() {
        return {
          num: 0
        }
      },
      computed: {
        computeNum() { return this.num + 1 }
      },
      methods: {
        add() {
          this.num++
        },
        sub() {
          this.num--
        }
      }
    }
    const app = Vue.createApp(data)
    app.mount('#app')

  </script>
</body>

</html>

二、vue3源码阅读方法

  1. 首先找到vue3源码仓库,拉取代码到本地
  2. package.json文件夹中的脚本添加sourcemap:“dev”: “node scripts/dev.js --sourcemap”,执行yarn dev(打包dist)
  3. 在packages/vue/examples下随便写一个HTML文件,并在其中使用vue,就可以观察具体vue内部运行情况。
<!DOCTYPE html>
<html lang="en">
<body>
  <div id="app"></div>
  <script src="../dist/vue.global.js"></script>
  <script>
    debugger
    Vue.createApp({ template: `<div></div>` }).mount('#app')
  </script>
</body>
</html>

三、methods属性中的方法this绑定源码

vue-next源码packages/runtime-core/src/componentOptions.ts中的600行左右

  if (methods) {
    for (const key in methods) {
      const methodHandler = (methods as MethodOptions)[key]
      if (isFunction(methodHandler)) {
        // In dev mode, we use the `createRenderContext` function to define
        // methods to the proxy target, and those are read-only but
        // reconfigurable, so it needs to be redefined here
        if (__DEV__) {
          Object.defineProperty(ctx, key, {
            value: methodHandler.bind(publicThis),
            configurable: true,
            enumerable: true,
            writable: true
          })
        } else {
          ctx[key] = methodHandler.bind(publicThis)
        }
        if (__DEV__) {
          checkDuplicateProperties!(OptionTypes.METHODS, key)
        }
      } else if (__DEV__) {
        warn(
          `Method "${key}" has type "${typeof methodHandler}" in the component definition. ` +
            `Did you reference the function correctly?`
        )
      }
    }
  }

最重要的一步就是ctx[key] = methodHandler.bind(publicThis),将每一个methods属性中的方法的this都绑定publicThis并存到ctx对象中(在模板引擎中需要从ctx里面取相应的方法来调用)。我们可以在源码中找到const publicThis = instance.proxy! as any,所以是绑定的this是组件实例上的data代理对象。

四、vscode快捷添加代码片段

首先找到vscode的user Snippets选项:

请添加图片描述

可以在snippet-generator中自动生成设置代码:

snippet-generator

设置完之后就可以,全局使用快捷指令:

快捷添加代码片段


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/30990.html

源码  属性  绑定  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 真千金的妈,女凭母贵的我内容精选(娇娇顾静怡江稚雅)
  • 男友车祸断腿时,我和新欢在车内拥吻高分言情_陈行简江若***新书_小说后续在线阅读_无删减免费完结_
  • 完结文重生高考填报志愿时,我放任全班上大专好文分享列表_完结文重生高考填报志愿时,我放任全班上大专好文分享(颜禾晚宋津年叶淼淼)
  • 陆寒澈沈秋晚小说完本+外篇(相逢难逃别离)畅享阅读
  • 雪上春霜删减内容修复版本(温观意陆一然)_雪上春霜删减内容修复版本(温观意陆一然)
  • 骤雨淋落晚星(林晚星裴临川)全书浏览_骤雨淋落晚星全书浏览
  • 全书浏览重生高考填报志愿时我放任全班上大专+后续(叶淼淼宋津年颜禾晚)_重生高考填报志愿时我放任全班上大专+后续(叶淼淼宋津年颜禾晚)全书结局
  • 他的甜撩藏不住附加黎初谢时晏:结局+番外免费品鉴(他的甜撩藏不住)全本浏览阅读连载中
  • 全文他死遁后逼疯清冷女权臣+完结+后续(苏煜顾宛柔)列表_全文他死遁后逼疯清冷女权臣+完结+后续
  • 暑假毕业旅游,班花将我们身份证交给黑导游(江诗晗)全书浏览_暑假毕业旅游,班花将我们身份证交给黑导游全书浏览
  • 重生到高考前,我放任竹马为爱私奔新上热文_裴文远柳雨文远完结版_小说后续在线阅读_无删减免费完结_
  • 雨织离歌浮生浅节选_沈翊鸣苏之雨小姐完整文本_小说后续在线阅读_无删减免费完结_

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1