论vue3.0和vue2.0区别之编程方式及例子详解
系列文章目录
第一章
论vue3.0和vue2.0区别之编程方式及例子详解
第二章
同一台电脑 实现 vue-cli2和vue-cli3同时并存 及 常见命令
第三章
vue3.0项目实战 - ElementUI框架版
第四章
【TypeScript】在vue3中遇到的问题及解决方案，未完待续
第五章
vue3.0项目实战系列文章 - 登录页面
第六章
vue3.0项目实战系列文章 - 使用周期函数
目录
系列文章目录
前题
一、编程说明
二、vue3.0和vue2.0代码例子作比
三、扩展vue和react
四、vue3.0开发过渡笔记
版本
vue3的安装使用
生命周期的区别
整体区别
总结
前题
首先了解一个新的功能首先要看它为什么出现，以及它的出现对现在的开发生态有哪些改变。
在vue2中我们进行开发叫做配置式开发 ,同一个功能逻辑可能需要 在data选项里写写，在methods里动动，生命周期再写两句，开发的时候可能不会觉得有什么。但是维护起来却有大问题。特别你要是对业务不熟悉接手别人的代码。
我一直都想着怎样能够面向功能块开发，将一个独立完整的业务功能封装成独立的代码块，这样既方便维护。同时封装相同的逻辑进行封装引用 ，也极大的降低了工作量，减少复制黏贴，以及复制黏贴过程中产生的错误。
vue3.0的变化可以总结为以下几点：
- 更小
- 更快
- 加强typescript支持
- Api一致性
- 提高可维护能力
- 开放更多底层功能
- composition - 函数式编程（1 首先，同样的业务不需要再在data和method中饱受分离之苦，业务块可以写在一起块，然后分离出去。2 其次，由于是函数，传参和返参方便多了。）
- 生命周期
• 新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次
• 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用
• vue3中,生命周期是从vue中导出的,需要用到的要进行导入,setup除外
• 除setup外,其他的生命周期都是写在setup中
• setup函数是发生在beforeCreate之前的 Vue3打包
打包使用可视化面板打包就可以但是打包后的dist文件不可以直接启动
如果你想在本地运行的话需要使用phpstudy配置一下才可以打开
然后要记住vue3打包后接口没有数据的情况那可能是网卡了等一会就好了
一、编程说明
vue2.0采用面向对象编程的思想，vue3.0则采用函数式编程的思想。
详细介绍：
面向对象编程
什么是对象
1、对象是单个事物的抽象，是一个具体的事物（一本书、一辆汽车、一个人都可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程）。
2、对象是一个容器，封装了属性（property；属性是对象的状态特征）和方法（method；方法是对象的行为。例：完成了）。
3、在实际开发中，对象是一个抽象的概念，可以将其简单理解为：数据集或功能集。
4、ECMAScript-262 把对象定义为：无序属性的集合，其属性可以包含基本值、对象或者函数。
5、严格来讲，这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。
面向对象的特征
- 封装性（就是包装,把一些重用的内容进行包装,在需要的时候,直接使用把一个值,存放在一个变量中,把一些重用的代码放在函数中,把好多相同功能的函数放在一个对象中,把好多功能的对象,放在一个文件中,把一些相同的内容放在一个对象中）
- 继承性（类与类之间的关系,js中没有类的概念,js中有构造函数的概念,是可以有继承的,是基于原型）
- 多态性（同一个行为,针对不同的对象,产生了不同的效果）
编程思想:
面向对象:提出需求,找对象,对象解决,注重的是结果
原型prototype
构造函数、实例、原型三者之间的关系
函数式编程
1、vue3 英文版说明
vue3 API相关的RFC，地址：https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md
2、函数式编程是一种编程范式，主要是利用函数把运算过程封装起来，通过组合各种函数来计算结果。
例子，假设我们要把字符串 functional programming is great 变成每个单词首字母大写，我们可以这样实现：
var string = 'functional programming is great';
var result = string.split(' ').map(v => v.slice(0, 1).toUpperCase() + v.slice(1)).join(' ');
上面的例子先用 split 把字符串转换数组，然后再通过 map 把各元素的首字母转换成大写，最后通过 join 把数组转换成字符串。 整个过程就是 join(map(split(str))),体现了函数式编程的核心思想： 通过函数对数据进行转换。
由此我们可以得到，函数式编程有两个基本特点：
• 通过函数来对数据进行转换
• 通过串联多个函数来求结果
3、对比声明式与命令式（见二中e3.0例子容易理解）
- 命令式：我们通过编写一条又一条指令去让计算机执行一些动作，这其中一般都会涉及到很多繁杂的细节。命令式代码中频繁使用语句,来完成某个行为。比如 for、if、switch、throw 等这些语句。
- 声明式：我们通过写表达式的方式来声明我们想干什么，而不是通过一步一步的指示。表达式通常是某些函数调用的复合、一些值和操作符，用来计算出结果值。
//命令式
var CEOs = [];
//----------for(var i = 0; i < companies.length; i++){
for(var i in companies){CEOs.push(companies[i].CEO)
}//声明式
var CEOs = companies.map(c => c.CEO);
4、函数式编程常见特性
无副作用，指调用函数时不会修改外部状态，即一个函数调用 n 次后依然返回同样的结果。
var a = 1;
// 含有副作用，它修改了外部变量 a
// 多次调用结果不一样
function test1() {a++return a;
}// 无副作用，没有修改外部状态
// 多次调用结果一样
function test2(a) {return a + 1;
}
透明引用
指一个函数只会用到传递给它的变量以及自己内部创建的变量，不会使用到其他变量。
var a = 1;
var b = 2;
// 函数内部使用的变量并不属于它的作用域
function test1() {return a + b;
}
// 函数内部使用的变量是显式传递进去的
function test2(a, b) {return a + b;
}
不可变变量
指的是一个变量一旦创建后，就不能再进行修改，任何修改都会生成一个新的变量。使用不可变变量最大的好处是线程安全。多个线程可以同时访问同一个不可变变量，让并行变得更容易实现。 由于 JavaScript 原生不支持不可变变量，需要通过第三方库来实现。 (如 Immutable.js，Mori 等等)
var obj = Immutable({ a: 1 });
var obj2 = obj.set('a', 2);
console.log(obj); // Immutable({ a: 1 })
console.log(obj2); // Immutable({ a: 2 })
函数是一等公民
我们常说函数是JavaScript的"第一等公民"，指的是函数与其他数据类型一样，处于平等地位，可以赋值给其他变量，也可以作为参数，传入另一个函数，或者作为别的函数的返回值。下文将要介绍的闭包、高阶函数、函数柯里化和函数组合都是围绕这一特性的应用
5、常见的函数式编程模型
1.闭包（Closure）
2.高阶函数
map
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。map 不会改变原数组。
假设我们有一个包含名称和种类属性的对象数组，我们想要这个数组中所有名称属性放在一个新数组中
// 使用高阶函数
var animals = [{ name: "Fluffykins", species: "rabbit" },{ name: "Caro", species: "dog" },{ name: "Hamilton", species: "dog" },{ name: "Harold", species: "fish" },{ name: "Ursula", species: "cat" },{ name: "Jimmy", species: "fish" }
];
var names = animals.map(x=>x.name);
console.log(names); //["Fluffykins", "Caro", "Hamilton", "Harold", "Ursula", "Jimmy"]
filter
filter() 方法会创建一个新数组，其中包含所有通过回调函数测试的元素。filter 为数组中的每个元素调用一次 callback 函数， callback 函数返回 true 表示该元素通过测试，保留该元素，false 则不保留。filter 不会改变原数组，它返回过滤后的新数组。
假设我们有一个包含名称和种类属性的对象数组。 我们想要创建一个只包含狗（species: “dog”）的数组。
// 使用高阶函数
var animals = [{ name: "Fluffykins", species: "rabbit" },{ name: "Caro", species: "dog" },{ name: "Hamilton", species: "dog" },{ name: "Harold", species: "fish" },{ name: "Ursula", species: "cat" },{ name: "Jimmy", species: "fish" }
];
var dogs = animals.filter(x => x.species === "dog");
console.log(dogs); // {name: "Caro", species: "dog"}
// { name: "Hamilton", species: "dog" }
reduce
reduce 方法对调用数组的每个元素执行回调函数，最后生成一个单一的值并返回。 reduce 方法接受两个参数：1）reducer 函数（回调），2）一个可选的 initialValue。
假设我们要对一个数组的求和：
// 不使用高阶函数
const arr = [5, 7, 1, 8, 4];
let sum = 0;
for (let i = 0; i < arr.length; i++) {sum = sum + arr[i];
}
console.log(sum);//25
// 使用高阶函数
const arr = [5, 7, 1, 8, 4];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue,0);
console.log(sum)//25
函数组合 (Composition)
函数式编程的一个特点是通过串联函数来求值。然而，随着串联函数数量的增多，代码的可读性就会不断下降。函数组合来解决这个问题。
假设有一个 compose 函数，它可以接受多个函数作为参数，然后返回一个新的函数。当我们为这个新函数传递参数时，该参数就会「流」过其中的函数，最后返回结果。
//两个函数的组合
var compose = function(f, g) {return function(x) {return f(g(x));};
};//或者
var compose = (f, g) => (x => f(g(x)));
var add1 = x => x + 1;
var mul5 = x => x * 5;
compose(mul5, add1)(2);// =>15
二、vue3.0和vue2.0代码例子作比
vue3 -- DEMO
<template><div><span>count is {{ count }}</span><span>plusOne is {{ plusOne }}</span><button @click="increment">count++</button></div>
</template><script>
import { value, computed, watch, onMounted } from 'vue'export default {setup() {// reactive stateconst count = value(0)// computed stateconst plusOne = computed(() => count.value + 1)// methodconst increment = () => { count.value++ }// watchwatch(() => count.value * 2, val => {console.log(`count * 2 is ${val}`)})// lifecycleonMounted(() => {console.log(`mounted`)})// expose bindings on render contextreturn {count,plusOne,increment}}
}
</script>
转换为vue2 -- DEMO
<template><div><span>count is {{ count }}</span><span>plusOne is {{ plusOne }}</span><button @click="increment">count++</button></div>
</template><script>export default {data() {return {count: 0};},methods: {increment: function () {this.count++;}},computed: {plusOne: function () {return this.count + 1;}},watch: {count: function (val) {console.log(`count * 2 is ${val * 2}`)}},mounted() {console.log(`mounted`);}};
</script>
1、
对比一下，我们不难发现：
vue2是将mounted，data，computed，watch之类的方法作为一个对象的属性进行导出。
vue3新增了一个名为setup的入口函数，value, computed, watch, onMounted等方法都需要从外部import。
函数式编程为组件的编写提供了更高的灵活度与可读性，并且更符合一个前端编写者的习惯（或者叫做“编程直觉”）。
2、
在vue2中，watch、computed、data、method等API都是直接作为对象的属性，传给vue实例的。这意味着，我们开发者在开发时，脑中需要给这个对象的不同属性（data、method、mounted之类的）建立联系。但一旦代码规模变大，这种联系就非常吃力了，这集中表现在大型vue组件代码的可读性很低。我想，每个维护过1000+行vue组件的开发者都会有所体会
而在vue3中，我们可以像写一个方法一样去写这个组件的JS逻辑部分，使用import来按需引入。这样的好处显而易见，首先就是我们需要写的代码量少了，其次就是我们可以封装更多的子函数、引用更多的公共函数去维护我们的代码，第三就是代码的可读性变高了。（当然，我们的打包体积也会变小）---- 此处需要调研
调研笔记1：
调研笔记2： async函数、await关键字
- async函数是使用
async关键字声明的函数。 async函数是AsyncFunction构造函数的实例， 并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。
//name 函数名称。
//param 要传递给函数的参数的名称。async function name([param[, param[, ... param]]]) {statements //包含函数主体的表达式。可以使用await机制。
}async/await的目的为了简化使用基于promise的API时所需的语法。async/await的行为就好像搭配使用了生成器和promise。- async函数可能包含0个或者多个await表达式。await表达式会暂停整个async函数的执行进程并出让其控制权，只有当其等待的基于promise的异步操作被兑现或被拒绝之后才会恢复进程。promise的解决值会被当作该await表达式的返回值。使用
async/await关键字就可以在异步代码中使用普通的try/catch代码块。 await关键字只在async函数内有效。- async函数一定会返回一个promise对象。如果一个async函数的返回值看起来不是promise，那么它将会被隐式地包装在一个promise中。例如，如下代码:
async function foo() {return 1
}
等价于:function foo() {return Promise.resolve(1)
}调研文章
vue中使用async和await来实现同步和异步_aaron9185的博客-CSDN博客_async await vue
调研笔记3： Promise
Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。
一个Promise，这个promise要么会通过一个由async函数返回的值被解决，要么会通过一个从async函数中抛出的（或其中没有被捕获到的）异常被拒绝。
三、扩展vue和react
vue和react最大的区别有两个，一是双向数据绑定 VS 单向数据流，二是模板语法 VS JSX。
vue3.0在函数式编程方面，使其在一些API的使用、组件JS层的逻辑上更像react，但其仍为模板语法。
四、vue3.0开发过渡笔记
版本
查看版本: npm view vue versions
npm i vue@lasted:下载的是vue2
- vue2
- vuex3
- vue-router3
- element-ui 2
- npm i vue@next：下载的是vue3
vue3
- vuex4
- vue-router4
- element-plus 1
- npm i vuex@next vue-router@next element-plus
vue3的安装使用
- 一、安装vue3：
npm i vue@next - 二、安装vue3版本的项目
- 三、安装vue-router、vuex
- 四、安装less@3、less-loader@7
- 五、配置vue.config.js,与vue2相同
生命周期的区别
整体区别
- 版本号不同
- 引用的vuex/vue-router版本不同
- vue3的APP.vue的《template》 中支持多个根节点
区别一：vue3中推崇使用函数式编程；各种创建实例，都调用函数来创建，我们从vue中解构出各种各样的函数来使用
区别二：Performance [pəˈfɔːməns]
重写了虚拟DOM的实现（跳过静态节点，只处理动态节点）
update性能提高1.3~2倍
SSR速度提高了2~3倍
区别三:Tree shaking [ˈʃeɪkɪŋ]
可以将无用模块“剪辑”，仅打包需要的【webpack新版本的】
区别四 Fragment ['frægmənt]
不再限于模板中的单个根节点[文档碎片]
区别五 <Teleport> [ˈtelɪpɔːt] 以前称为<Portal> [ˈpɔːtl]，译作传送门
可以把组件内部的部分内容挂载到除#app的容器中(<Teleport to="#fotter">)
<div id="app"></div><div id="footer"></div><Teleport to="#footer"> 你好,世界</Teleport>区别六<Suspense> [səˈspens]
可在嵌套层级中等待嵌套的异步依赖项,嵌套一个异步组件，可以在获取到数据之前加载loading效果
父组件------------------
<template><Suspense><template #default><AsyncComponent></AsyncComponent></template><template #fallback>loading.....</template></Suspense>
</template><script>
import AsyncComponent from "./AsyncComponent.vue";
export default {name: "App",components: {AsyncComponent,},
};
</script>
子组件--------------------------
<template><div>{{ msg }}</div>
</template><script>
import { defineComponent } from "vue";
const query = () => {return new Promise((resolve) => {setTimeout(() => {resolve("我是异步组件");}, 2000);});
};
export default defineComponent({async setup() {let msg = await query();return {msg,};},
});
</script>区别七:TypeScript更好的TypeScript支持
区别八：vue3支持把组件中的某些内容以图形的方式绘制到canvas画布上(Custom Renderer API自定义渲染器API)Apache ECharts
自定义渲染器API
用户可以尝试WebGL自定义渲染器
区别九：vue3使用的Composition API：(Composition API聚合API):vue2遵循options API，vue3遵循Composition API
options API:数据根据功能划分到data、methods、computed、watch区域(分散式API)
Composition API:vue3中所有的数据方法都放到了setup()方法中，全部组合到了一起，没有细分(聚合式API)
组合式API，替换原有的 Options [ˈɒpʃnz] API
根据逻辑相关性组织代码，提高可读性和可维护性
更好的重用逻辑代码（避免mixins混入时命名冲突的问题）
但是依然可以延用 Options [ˈɒpʃnz] API
区别十：vue3中的响应式数据
劫持，基于Proxy实现的；vue3中的响应式数据劫持，不再基于vue2的Object.defineProperty(),而是基于ES6内置的Proxy（不兼容IE）。
//vue3中的响应式//基于ES6中的Proxy来实现的,new Proxy返回obj的代理对象let proxObj = new Proxy(obj, {//对obj的第一层做劫持//target代理的对象,key值get(target, key) {return target[key]},set(target, key, value) {if (target[key === value]) return;target[key] = value;//控制视图重新渲染,操作代理对象时触发渲染console.log('rendering');}})区别十一：获取页面数据组件
import { ref, onMounted } from 'vue';
import api from '@/config/api/jsonConfig.js'
import commonData from '@/config/general/commonData.js'
/*
Fcn：请求表格数据接口名
autoRequest:是否需要挂载完成后自动加载数据
*/
export default (Fcn,autoRequest) => {// 表格绑定数据const tableData = ref([])// 表格页码数据const paginationOpt = ref({pageNumber: 1,pageSize: 20,totalRecords: 0})// 获取表格数据const getTableData = async (params) => {let d = await api[Fcn]({ params: { ...params, organizationUID: commonData.currentOrg.organizationUID } })if (!d) returntableData.value =d.data.pagination? d.data.records:d.datapaginationOpt.value = d.data.pagination}// 翻页const handleSizeChange = (v) => {paginationOpt.value.pageSize = vgetTableData(paginationOpt.value)}const handleCurrentChange = (v) => {paginationOpt.value.pageNumber = vgetTableData(paginationOpt.value)}// 挂载完成请求数据onMounted(() => {if(autoRequest) getTableData()})return { tableData, paginationOpt, getTableData, handleSizeChange, handleCurrentChange }
}
页面组件：只需要将方法名传入即可
export default defineComponent({setup() {return {...useTable("examSourcegetList",true),};},
});
总结
1.function component 将会是接下来各大框架发展的一个方向，function天然对TS的友好也是一个重要的影响。
2.react hook的上手成本相对于vue会难一些，vue天生规避了一些react中比较难处理的地方。
3.hook一定是大前端的一个趋势。
4.目前的项目中前端中体现的函数式编程比较多，后端更多的还是OOP的思想。
5.在大型的偏向工程话的项目中，使用面向对象的方式方便拓展，更易编写。在项目中的比较小的一些组织模块可以使用函数式编程来提高效率。
参考文章：vue3 为什么要使用composition函数式编程_白马湖小龙王的博客-CSDN博客_vue3函数式编程
从函数式编程和面向对象的思考到Vue3的函数式编程_治愈云_q1942951600的博客-CSDN博客_vue3函数式编程
论vue3.0和vue2.0区别之编程方式及例子详解相关推荐
- [转载] 【全面总结】Tensorflow 2.0+与Keras的联系与应用（含model详解）
参考链接: Tensorflow 2.0的新功能 Tensorflow 2.0+与Keras的联系与应用(含model详解) 事实上我个人入坑tensorflow比较晚,于是导致我其实并没有经历Ten ...
- 锁定计算机与注销计算机有什么区别,电脑休眠与睡眠、注销与关机有什么区别？电脑六种关机模式详解...
在我们日常生活工作中,操作电脑的时会通过关机.注销.休眠等各种方式来让电脑停止工作.这些方式大部分含义都很直白,用途一目了然,但是很少有人知道这些选项究竟有哪些实质上的不同,比如:休眠和睡眠.注销和关 ...
- vue3.0和vue2的区别
一.默认进行懒观察(lazy observation) 在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者.当数据很大时,这可能会在页面载入时造成明显的性能压力.3.x 版本,只会对「被用 ...
- vue3.0和vue2.0的比较
前言: 对vue3.0进行一次整理 目录: 一.vue3.0的亮点 1.性能比vue2.x快1.2~2倍 2.支持按需编译,按需导入,体积比vue2.x更小 3.支持组合API,类似React Hoo ...
- VMware下OSSIM 5.2.0的下载、安装和初步使用（图文详解）
入门阶段不建议选用最新的版本. 采用OSSIM 4.11 到 OSSIM5.0.3 之间任何版本做实验,sensor的状态都会是"V". 建议,入门,采用OSSIM5.0.0 ...
- 鸿蒙系统怎么退出,华为鸿蒙2.0系统升级了怎么退回EMUI11系统？操作教程详解[多图]...
华为鸿蒙2.0系统升级了怎么退回EMUI11系统?很多用户升级了又不知道如何才能退回到原来的系统,下面就让安卓乐园小编为大家带来,2.0系统升级退回EMUI11系统操作教程详解. 这次开启华为鸿蒙2. ...
- 华为手机如何用鸿蒙系统导航,华为鸿蒙2.0系统升级了怎么退回EMUI11系统？操作教程详解...
华为鸿蒙2.0系统升级了怎么退回EMUI11系统?很多用户升级了又不知道如何才能退回到原来的系统,下面就让安卓乐园小编为大家带来,2.0系统升级退回EMUI11系统操作教程详解. 这次开启华为鸿蒙2. ...
- 【opencv4.3.0教程】06之基础结构3之Scalar_结构详解
目录 一.前言 二.温故知新--Rect_ 1.定义与成员变量 2.构造函数 3.常用方法 三.Scalar_ 1.定义 1.构造函数 2.基本操作 3.使用时的数据类型 2.常用方法 1.加法及加赋 ...
- ZigBee 3.0实战教程-Silicon Labs EFR32+EmberZnet-2-02：资源包详解
[源码.文档.软件.硬件.技术交流.技术支持,入口见文末] [所有相关IDE.SDK和例程源码均可从群文件免费获取,免安装,解压即用] 持续更新中,欢迎关注! 一.获取资源包 本教程使用的全部资源包, ...
最新文章
- 高并发大流量专题---5、CDN加速
- springboot rabbitmq direct exchange和topic exchange 写法上关于路由键的区别
- Oracle中的pfile和spfile详解
- s:property的用法
- python3编程入门_在类Unix系统上开始Python3编程入门
- tableau 自定义省份_在Tableau中使用自定义图像映射
- 计算机专业做产品,非计算机专业如何做产品经理？
- 使用tcpdump，adb进行手机抓包
- 华为与万达签订5G战略合作协议 推动5G商业场景应用
- 解决 asp.net 伪静态 IIS设置后 真正的HTML无法显示的问题
- 电子产品环境可靠性测试标准有哪些？
- vue 点击a链接 实现url下载文件
- 最新一代CAD技术方案------Onshape
- oracle匹配excel数据,ORACLE与excel的数据互传方法
- 边框border-radium属性
- 本地调试支付回调内网穿透工具
- Java: 将课程表解析成每周课表
- flink-cdc,clickhouse写入，多路输出
- 【转】GitLab配合小乌龟配置SSH Key
- 【笨木头Cocos2d-x 042】一个函供应多个菜单回调——UserObject自定义数据