Vue3+TypeScrip学习笔记（更新中）

ERROR!!!!!!

已于 2023-07-29 20:20:00 修改

阅读量194

点赞数

分类专栏： vue typescript 文章标签： html5

于 2021-05-18 20:59:44 首次发布

本文链接：https://blog.csdn.net/liujiebahuang/article/details/117000635

版权

vue 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

typescript

2 篇文章 0 订阅

订阅专栏

一、概述

首先，吃井不忘挖水人，感谢公司看我蠢给免费培训。。。

vue官网文档链接: https://v3.cn.vuejs.org/guide/installation.html

VUE3基本变化

源码
1，源码通过monorepo的形式来管理源代码：
mono:单个；
repo:rebository仓库；
主要是将许多项目的代码存储在一个repository中；
多个包本身相互独立，可以有自己的功能逻辑、单元测试等，同时又在同一个仓库下方便管理；
模块划分更加清晰，可维护性、可拓展性更强；
2，源码使用ts进行重写：
vue2.x,使用Flow来进行类型检测；
vue3.x源码全部使用TS进行重构了

性能
使用proxy进行数据劫持：
vue2.x时候，使用Object.defineProperty来劫持数据的getter和setter方法，这种方法存在缺陷：当给对象添加或删除属性时，无法劫持和监听，不得不提供一些特殊的API，比如 $set 和 $delete （hack方法）。
Vue3.x开始使用Proxy来进行数据的劫持。

删除了一些不必要的API：$on $off $once
移除了一些特性：filter 内联模板等

编译优化：生成Block Tree,slot编译优化，diff算法优化

新的API
Options API---->Composition API
Options API包括data,props,methods,computed,生命周期等。内聚性相对差，比如created中会使用某个方法来修改data中的数据。

Composition API可以将相关联的代码放在同一处进行处理，不需要在多个options之间寻找。

Hooks函数增加代码复用性：
vue2.x中通常通过mixins在多个组件中共享逻辑，存在命名冲突；
vue3.x通过Hook函数将一部分独立的逻辑抽取出去，且是响应式的。

vue3.x使用

安装

1、在页面上以 CDN（Content Delivery Network/Content Distribution Network）包的形式导入。
2、下载 JavaScript 文件并自托管。
3、使用 npm 安装它。
4、使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。

//CDN引入
<body>
  <div id="app"></div>

  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const why = {
      template:'<h2>hello world</h2>'
    }
    const app = Vue.createApp(why)
    app.mount("#app")
  </script>
</body>


//本地引入
<body>
  <div id="app"></div>

  <script src="../js/vue3.js"></script>
  <script>
    Vue.createApp({
      template:'<h2>白日依山尽，黄河入海流。欲穷千里目，更上一层楼。</h2>'
    }).mount("#app")
  </script>
</body>

计数器案例

//原生方法
<body>
  <h2 class="counter">0</h2>
  <button class="increment">+1</button>
  <button class="decrement">-1</button>

  <script>
    //1、获取所有的元素
    const counterEl = document.querySelector('.counter')
    const incrementEl = document.querySelector('.increment')
    const decrementEl = document.querySelector('.decrement')

    //2、定义变量
    let counter = 100
    counterEl.innerHTML = counter

    //3、监听按钮的点击
    incrementEl.addEventListener('click',() => {
      counter ++
      counterEl.innerHTML = counter
    })
    decrementEl.addEventListener('click',() => {
      counter --
      counterEl.innerHTML = counter
    })

  </script>
</body>

//vue方法
<body>
  <div id="app"></div>

  <script src="../js/vue3.js"></script>
  <script>
    Vue.createApp({
      template: `
        <h2>{{counter}}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
      `,
      data: function(){
        return {
          counter:100
        }
      },
      methods:{
        increment(){
          this.counter ++
        },
        decrement(){
          this.counter --
        }
      }
    }).mount("#app")

  </script>
</body>

Tips:声明式&&命令式编程

以上案例涉及到两种编程模式：声明式和命令式
写不动了，百度吧。。。。。。

Tips: MVVM模型

写不动了，百度吧。。。。。。

Template属性

使用createApp时，传入了一个对象
Template属性表示需要vue帮我们渲染的模板信息
不会被浏览器直接渲染
。。。。。。

两种template写法：

<body>
  <div id="app"></div>
//1有提示无高亮
  <script type="x-template" id="content">
    <h2>{{counter}}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </script>
  
 或
  
 //2有提示有高亮
  <template id="content">
    <h2>{{counter}}</h2>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </template>

  <script src="../js/vue3.js"></script>
  <script>
    Vue.createApp({
      template: `#content`,//必须要以#开头，会被用作querySelector,并且使用匹配元素的innerHTML作为模板字符串
      data: function(){
        return {
          counter:100
        }
      },
      methods:{
        increment(){
          this.counter ++
        },
        decrement(){
          this.counter --
        }
      }
    }).mount("#app")

  </script>
</body>

data属性

vue2.x：可以传入一个对象（官方推荐函数）
vue3.x：必须传入一个函数，否则报错
data中返回的对象会被系统劫持

methods

Tips:this

不应使用箭头函数来定义method函数，箭头函数绑定了父级作用域的上下文，this不会指向组件实例。
箭头函数不绑定this, this指向window,无法读取data
(箭头函数中使用了this,会去上层作用域中寻找，一直找到window)
在这里插入图片描述

vue源码

git 搜索 vue-next 选择一个稳定的版本git clone（推荐）下来

直接download不仅慢，后面会出现其他问题,解决办法如下：
在终端中完成以下三行

git init
git add .
git commit -m "文字"

遇到了node版本问题，说The engine “node” is incompatible with this module，下载一个新的稳定的node重装一下即可。

具体问题具体分析。

调试

根目录下继续执行以下

yarn install
yarn dev

（在packages/vue/dist/vue.global.js会发现和CDN上的打包的代码一毛一样）

packages/vue/examples文件夹下创建一个文件夹，其中可以创建一个html文件,引入vue.global.js文件。
就可以debugger了
上面这种方法不太方便。。。

直接在根目录的package.json文件中配置一下
–souecemap，将相关代码映射出去

"dev": "node scripts/dev.js --souecemap"

终端重新运行yarn dev,dist文件下会多一个vue.global.js.map文件
debugger后，能够显示断点的具体文件位置。

Tips:vscode添加代码片段

1，设置=》用户代码片段
2，选择一个语言
3，快速生成要写成片段的代码。链接: https://snippet-generator.app/
4,写上描述以及快捷键，复制粘贴到vscode中的html.json（或其他语言json文件）文件中

二、webpack

官方文档: https://webpack.js.org/
中文文档: https://webpack.docschina.org/

安装 webpack、webpack-cli(命令行运行工具,可选)

npm install webpack webpack-cli -g

执行webpack命令，会执行node_modules下.bin目录下的webpack;
webpack在执行时是依赖webpack-cli的，没有安装会报错；
webpack-cli中代码执行时，才是真正利用

三、vue3+vite+ts 记录

脚手架搭建不赘述了，网上一搜一大把。

依赖以及 vite.config.ts配置

css预处理
path根路径

ERROR!!!!!!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue3+TypeScrip学习笔记（更新中）

目录VUE3基本变化VUE3基本变化源码1，源码通过monorepo的形式来管理源代码：mono:单个；repo:rebository仓库；主要是将许多项目的代码存储在一个repository中；多个包本身相互独立，可以有自己的功能逻辑、单元测试等，同时又在同一个仓库下方便管理；模块划分更加清晰，可维护性、可拓展性更强；2，源码使用ts进行重写：vue2.x,使用Flow来进行类型检测；vue3.x源码全部使用TS进行重构了性能使用proxy进行数据劫持：vue2.x时候，使用O
复制链接

扫一扫