免费的行情软件网站不用下载,给别人做网站要问什么问题,入侵织梦网站后台,网站程序开发的基本步骤Vue2 和 vue3 区别 Api#xff1f; 升级v3是因为 v2有一些基础bug 例如数据丢失等 但是 v3就解决了这个问题 v3利用了双向数据绑定 数值变化页面就该变 v2 和 v3 的 api 不一样 v2的api是选择式的 v3是组合式的 例如 setup就是组合的 v2 和 v3 的生命周期也不太一样 v2 和 v3 …Vue2 和 vue3 区别 Api 升级v3是因为 v2有一些基础bug 例如数据丢失等 但是 v3就解决了这个问题 v3利用了双向数据绑定 数值变化页面就该变 v2 和 v3 的 api 不一样 v2的api是选择式的 v3是组合式的 例如 setup就是组合的 v2 和 v3 的生命周期也不太一样 v2 和 v3 的双向绑定也不太一样v2采用的是object.definepropty()数据劫持订阅发布获取的 v3采用的是 proxy 数据代理 v3也没有this指向 如果需要的话 可以在 setup 进行定义 Vue2 和 vue3 生命周期 Vue2--------------vue3 beforeCreate - setup() created - setup() beforeMount - onBeforeMount mounted - onMounted beforeUpdate - onBeforeUpdate updated - onUpdated beforeDestroy - onBeforeUnmount destroyed - onUnmounted activated - onActivated deactivated - onDeactivated errorCaptured - onErrorCaptured Ref 和reactive 区别 ref和reactive都是Vue.js 3.x版本中新增的响应式API用于实现组件的数据响应式更新。它们的主要区别如下 1. 数据类型不同ref用于包装JavaScript基本类型的数据如字符串、数字、布尔值等而reactive可以用于包装JavaScript对象和数组等复杂类型的数据。 2. 使用方式不同ref需要通过在模板中使用ref指令以及在JavaScript代码中使用ref函数进行创建和使用而reactive则需要通过调用Vue.js提供的reactive函数进行包装和创建。 3. 访问方式不同对于通过ref函数创建的响应式数据我们可以通过.value属性来访问其实际值而对于通过reactive函数创建的响应式对象我们可以直接访问其属性或调用其方法。 4. 设计理念不同ref主要是为了解决单一元素/数据的响应式问题而reactive则是为了解决JavaScript对象和数组等复杂数据结构的响应式问题。 总的来说ref和reactive都是用于实现Vue.js组件的数据响应式更新但是它们的使用方法、适用范围和设计理念等方面略有不同需要根据具体的应用场景选择合适的API进行使用。 Watch 监听 Immdiate 监听回调 Deep 深度监听 watch监听的三个属性 1.handlerwatch中监听到数据变化后需要具体执行的方法 2.immediate使用watch时有一个特点就是当值第一次绑定时不会执行监听函数只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数则就需要用到immediate属性 3.deep当需要监听一个对象的改变时普通的watch方法无法监听到对象内部属性的改变此时就需要deep属性对对象进行深度监听数组字符串一般不需要 data {return {obj: {name: 王,age: 18},}
},
watch: {obj: {// 执行方法handler(newValue,oldVal) {console.log(oldValue)console.log(newValue)},deep: true, // 深度监听immediate: true // 第一次改变就执行}// 如果只需要监听对象中的一个属性值则可以做以下优化使用字符串的形式监听对象属性obj.name: {// 执行方法handler(newValue,oldVal) {console.log(oldValue)console.log(newValue)},deep: true, // 深度监听immediate: true // 第一次改变就执行}
} Commputed 计算 computed 是基于它的依赖缓存只有在它的相关依赖发生改变时才会进行更新。官方文档是这样说的对于任何包含响应式数据的复杂逻辑你都应该使用计算属性 计算属性computed的setter和getter 计算属性默认只有 getter不过在需要时你也可以提供一个 setter 计算属性和侦听器 — Vue.js (vuejs.org) computed: {fullName: {// getterget: function () {return this.firstName this.lastName},// setterset: function (newValue) {var names newValue.split( )this.firstName names[0]this.lastName names[names.length - 1]}}
}
// ... Emit 传递值 this.$emit 子传父 $emit父组件传data给子组件子组件通过$emit来触发父组件中绑定在子组件身上的事件达到改变父组件中的data的方法。下面介绍$emit传值的几种方法 子组件
templatedivdiv子组件/divbutton clickchangeFather点击我向父组件传递参数/button/div/templatescriptexport default {methods: {changeFather() {this.$emit(changeEvent,1);}}};/scriptstyle/style
父组件
templatediv idappp这是父组件/pdiv{{myString}}/divTest changeEventchangeMyString //div/templatescriptimport Test from ./components/Test;export default {name: App,components: { Test },data: function() {return {myString: };},methods: {changeMyString(val) {console.log(val);this.myStringval;}}};/scriptstyle#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}/style This.$ref 深入理解和使用this.$refs——Vue.js的利器 Vue.js是一个流行的JavaScript框架用于构建交互性强大的用户界面。在Vue.js中this.$refs是一个强大的特性允许你直接访问组件中的DOM元素或子组件实例。本教程将带你深入了解this.$refs的使用方法和场景。 什么是this.$refs this.$refs是Vue实例提供的属性允许你访问组件中的DOM元素或子组件。这使得你能够在需要的时候直接操作DOM或与子组件进行通信而不需要通过props或事件的方式进行交互。 使用场景 访问DOM元素 有时候你可能需要直接操作一个DOM元素比如改变其样式、焦点等。使用this.$refs你可以很方便地实现这些效果。 templatedivmy-child refchildComponent :messageparentMessage /button clickchangeMessage改变子组件消息/button/div
/templatescript
import MyChild from ./MyChild.vue;export default {components: {MyChild},data() {return {parentMessage: 这是父组件的消息};},methods: {changeMessage() {this.$refs.childComponent.message 子组件的新消息;}}
}
/script Ts 优点 1.静态输入 静态类型化是一种功能可以在进行编写脚本时检测错误。查找并修复错误对于编写更健壮的代码并对其进行维护以便使得代码质量更好、更清晰。 2.大型的开发项目 有时为了改进开发项目需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果因此有必要撤销这些变化。而使用TypeScript工具来进行重构更变的容易、快捷。 3.更好的协作 当发开大型项目时进行开发的过程当中乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能而不是在编译项目时检测错误。 双向映射 双向映射是指在键值对中建立双向一一对应关系的一种模式。它既可以通过键名key去获取值value也可以通过值去获取键名。让我们看下如何在JavaScript中实现一个双向映射以及 TypeScript 中的应用。 字符串枚举
枚举参考
Typescript - enum 枚举类型数值型枚举 / 字符串枚举 / 常量枚举 / 异构枚举 / 计算枚举成员 / 联合枚举和枚举成员类型 / 运行时的枚举 / 环境枚举 / 对象与枚举教程_ts enum类型-CSDN博客 Enums枚举是 TypeScript 的少数功能之一它不是 JavaScript 的类型级扩展仅支持数字的和基于字符串的枚举。 在一个字符串枚举中每个成员都必须用一个字符串字头或另一个字符串枚举成员进行常量初始化 enum Direction {Up UP, Down DOWN, Left LEFT, Right RIGHT,
}常量枚举 常量枚举通过在枚举上使用 const 修饰符来定义常量枚举不同于常规的枚举他们会在编译阶段被删除 const enum Size {WIDTH 10,HEIGHT 20
}const area Size.WIDTH * Size.HEIGHT; // 200Ts 元组
元组参考
TS基础类型-CSDN博客 元组类型允许表示一个已知元素数量和类型的数组各元素的类型不必相同。 比如你可以定义一对值分别为 string和number类型的元组。 //1.默认值
let tom: [string, number] [Tom, 25];
//2.通过下标赋值
let tom: [string, number] [, 0];
tom[0] Tom;
tom[1] 25;
//通过下标获取元组的元素并进行对应的操作
tom[0].slice(1);
tom[1].toFixed(2);
//3.越界操作
let tom: [string, number];
tom [Tom, 25];
tom.push(male);
tom.push(true);//报错,当添加越界的元素时它的类型会被限制为元组中每个类型的联合类型//解构赋值
const lilei: [string, number] [Lilei, 23];
console.log(lilei);
const [myname, myage]: [string, number] lilei;
console.log(myname, myage);
// 解构赋值
let arr:[number,string][100,hello]//不是解构
let [A,B]:[number,string][100,hello]//是解构 ----解构的隐式代码 let Ax[0] let Bx[1]let obj1:[number,string][100,hello]
let [x,y]:[number,boolean][100,true]
console.log(x,y)枚举
// 枚举
enum netWork{net2G,net3G,net4G,net5G,net6G}
function fn(x:number){
if(x0){1console.log(做2g的网络请求)
}
else if(x1){console.log(做3g的网络请求)
}
else if(x2){console.log(做4g的网络请求)
}
else if(x3){console.log(做5g的网络请求)
}
else if(x4){console.log(做6g的网络请求)
}
}
fn(netWork.net6G)//net6G--可以需求改变 类型断言 类型断言 有些情况下变量的类型对于我们来说是很明确但是TS编译器却并不清楚此时可以通过类型断言来告诉编译器变量的类型断言有两种形式 第一种let someValue: unknown this is a string;let strLength: number (someValue as string).length;
1
2
第二种let someValue: unknown this is a string;let strLength: number (stringsomeValue).length;泛型 泛型Generic 定义一个函数或类时有些情况下无法确定其中要使用的具体类型返回值、参数、属性的类型不能确定此时泛型便能够发挥作用。 举个例子function test(arg: any): any{return arg;}
1
2
3
上例中test函数有一个参数类型不确定但是能确定的时其返回值的类型和参数的类型是相同的由于类型不确定所以参数和返回值均使用了any但是很明显这样做是不合适的首先使用any会关闭TS的类型检查其次这样设置也不能体现出参数和返回值是相同的类型使用泛型function testT(arg: T): T{return arg;}
1
2
3
这里的T就是泛型T是我们给这个类型起的名字不一定非叫T设置泛型后即可在函数中使用T来表示该类型。所以泛型其实很好理解就表示某个类型。那么如何使用上边的函数呢方式一直接使用test(10)
1
使用时可以直接传递参数使用类型会由TS自动推断出来但有时编译器无法自动推断时还需要使用下面的方式
方式二指定类型testnumber(10)
1
也可以在函数后手动指定泛型
可以同时指定多个泛型泛型间使用逗号隔开function testT, K(a: T, b: K): K{return b;}testnumber, string(10, hello);
1
2
3
4
5
使用泛型时完全可以将泛型当成是一个普通的类去使用
类中同样可以使用泛型class MyClassT{prop: T;constructor(prop: T){this.prop prop;}}
1
2
3
4
5
6
7
除此之外也可以对泛型的范围进行约束interface MyInter{length: number;}function testT extends MyInter(arg: T): number{return arg.length;}
1
2
3
4
5
6
7
使用T extends MyInter表示泛型T必须是MyInter的子类不一定非要使用接口类和抽象类同样适用。跨组件通信 inject , provide
正常是父子通信 如果 想祖孙通信 不像一个个传值 可以使用这个 provide/inject使用方式 provideObject | () Object
injectArraystring | { [key: string]: string | Symbol | Object }
provide应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 数据。在
该对象中你可以使用 ES2015 Symbols 作为 key但是只在原生支持 Symbol
和 Reflect.ownKeys 的环境下可工作。
inejct可以是字符串数组或者一个对象。接收到的值会被vue直接添加到当前组件实例对
象身上。provide/inject的作用 vue官网原话【允许一个祖先组件向其所有子孙后代注入一个依赖不论组件层次有多深
并在其上下游关系成立的时间里始终生效。】也就是如果当前组件设置了provide传递数据
那么在当前组件的所有后辈组件中都可以使用inject接收这个数据。 this.$solt this.$slots是vue里面的一个只读的api用来访问被插槽分发的内容。每个具名插槽有其相应的 property (例如v-slot:foo 中的内容将会在 vm.$slots.foo 中被找到)。default property 包括了所有没有被包含在具名插槽中的节点或 v-slot:default 的内容。 这个api在日常用的不多今天一个项目里控制列的展示中看到了这个api然后惊奇的发现在子组件的created里面打印this.$slots是一个空对象请以JSON.parse(JSON.stringify())这种方式转换因为对象后面会被赋值在mounted里面打印才可以拿到。 这是因为在created阶段只是定义好了实例以及一些datamethods等基础属性this.$slots这种属性只是进行了初始化定义并没有真正赋值。而this.$slots其实会去寻找DOM元素对应的插槽只有在mounted的阶段DOM才被挂载成功。 Ts 对象类型
js中的对象是由属性和方法构成的,而ts中对象的类型就是在描述对象的结构(有什么类型的属性和方法)
对象类型的写法:
const person:{name:string;age:number;sayHi():void}{
name:XXX,
age: 18 ,
sayHi(){
//do something...
}
}
解释:
直接使用{}来描述对象结构 属性采用属性名:类型的形式 方法彩虹 方法名():返回值的形式
如果方法中有参数,就在方法名后面的小括号中指定参数类型 fn(name:string):void
再一行代码中指定对象的多个属性类型时,使用;分号来分隔
如果一行代码只指定一个属性类型(通过分割多个属性类型) 可以去掉;分号
方法的类型也可以使用箭头函数形式 ps {sayHi:()void}Ts 函数类型 参考
TS的常用类型_ts 可选类型-CSDN博客
函数的类型实际上指的是 函数参数和返回值的类型为函数执行类型的两种方式://1指定参数 返回值的类型
function add(num1:number,num2:number):number{
return num1num
}
const add(num1:number,num2:number):number{
return num1num
}//2同时指定参数 和返回值的类型const add:(arg1:number,arg2:number)number(arg1,arg2){arg1arg2}
解释:当函数作为表达式时,可以通过类似煎肉函数形式的语法来作为函数添加类型
注意:这种形式 只适用于函数表达式
如果函数没有返回值,那么函数的返回值类型为 : void
function(name:string):void{//do something....
}
可选参数:
是有函数实现某个功能时,参数可以传也可以不传.这种情况下,在给参数定义参数类型时就能用到
可选参数
ps:自己实现一个数组的slice方法 可以slice( 1 )也可slice( 1 , 3 )
可选参数:在可传可不传的参数名称后加?(问号)
注意:可选参数只能出现在参数列表的最后,也就是说也选参数后边不能再出现必选参数TS 联合类型
//如果 数组中既有number类型 又有string类型:
类型别名(自定义类型):为任意类型起别名.
使用场景 当同一类类型(复杂)被多次使用时 可以通过类型别名,简化该类型的别名
const arr:(number|string)[][ 1 ,a, 2 ,b]
| 在ts中叫 联合类型 (由两个或者多个其他类型组成的类型表示可以是这些类型中的 任意一种)
//如果不添加括号 表示 既可以是数值类型也可以是字符串数组Ts 交叉类型
参考
ts -- 交叉类型 · Typescript -- 学习 · 看云 (kancloud.cn) 1.交叉类型我们可以把现有的多种类型叠加到一起成为一种类型它包含了所需的所有类型的特性,取多个类型的并集 简单的说 交叉类型是将多个类型合并为一个类型,用 来表示 2.下面的案例是将两个对象合并并且返回合并后的对象 3.仅仅把原始类型、字面量类型、函数类型等原子类型合并成交叉类型是没有任何用处的因为任何类型都不能满足同时 属于多种原子类型比如既是 string 类型又是 number 类型
