手机o2o网站建设,百安居装修官网,视频链接怎么制作,苏州相城区网站建设目录
一、Vue3 从入门到进阶
1.1、Vue3 相比于 Vue2 好在哪里#xff1f;
1.2、创建 vue-cli3 脚手架
1.3、Vue3 的使用
1.3.1、拉开序幕的 setup
1.3.2、ref 函数
什么是响应式数据
ref 响应式处理
1.3.3、reactive
1.3.4、reactive 对比 ref
1.3.5、setup 的参数…
目录
一、Vue3 从入门到进阶
1.1、Vue3 相比于 Vue2 好在哪里
1.2、创建 vue-cli3 脚手架
1.3、Vue3 的使用
1.3.1、拉开序幕的 setup
1.3.2、ref 函数
什么是响应式数据
ref 响应式处理
1.3.3、reactive
1.3.4、reactive 对比 ref
1.3.5、setup 的参数props、context
1.3.6、computed 计算属性 一、Vue3 从入门到进阶 1.1、Vue3 相比于 Vue2 好在哪里 Ps以下数据来源于官网 a性能提升
打包大小减少 41%.初次渲染快 55%更新渲染快 133%.内存减少 54%.......
b 源码升级
使用 Proxy 代替 defineProperty 实现响应式.重写虚拟 DOM 的实现和 Tree-Shaking......
c拥抱 TypeScript
Vue3 可以更好的支持 TypeScript
d新特性
setup 配置ref 与 reactivewatch 与 watchEffectprovide 与 inject 1.2、创建 vue-cli3 脚手架
Ps具体怎么创建可以看这篇 http://t.csdnimg.cn/rq4slhttp://t.csdnimg.cn/rq4sl a查看当前 vue-cli 的版本确保在 4.5.0 以上. b安装或者升级 vue/cli
npm install -g vue/cli
c创建
vue create vue_demo
d启动
cd vue_demo
npm run serve
e修改 vue.config.js 内容为如下内容就是为了关闭语法检查 fmain.js 说明
//引入的不再是 vue 构造函数了, 引入的是一个名为 createApp 的工厂函数
import { createApp } from vue
import App from ./App.vue//创建应用实例对象 —— app
const app createApp(App)
//挂载
app.mount(#app)g新特性之一vue3 的模板接口可以没有根标签 1.3、Vue3 的使用
1.3.1、拉开序幕的 setup
vue3 中有一个新的配置项值是一个函数. 他是所有组合 API 的“舞台”也就是说之前 vue2 组件中使用到的 data、methods...... 都要配置在 setup 中.
asetup 函数有三种返回值
若返回一个对象那么对象的属性、方法在模板种就可以使用了.若返回的是一个渲染函数那么就可以自定义渲染内容后面细讲当前只做了解.
b注意点请忘掉 vue2 中的 data、methods... 现在是 vue3 的时代
尽量不要和 vue2.x 混用原因如下 vue2.x 配置的 data、methods、 computed....... 种可以访问到 setup 中的属性方法但是 setup 中不能访问到 vue2.x 配置中的 data、methos、computed......如果有重名setup 优先.setup 不是一个 async 函数因为返回值不再是 return 的对象而是 promise 模板看不到 return 对象中的属性.
c案例如下
template!-- vue3 中模板接口可以没有跟标签 --div你好/divdiv欢迎来到 vue3/divdiv{{ name }}/divbutton clicksayHi点我进行自我介绍~/button
/templatescript
export default {name: App,//这里暂时限不考虑响应式的问题setup() {//数据let name cyk;let age 18;//方法function sayHi() {alert(大家好啊我是${name}, 今年 ${age} 了);}return {//模板中需要什么数据就返回什么name,age,sayHi,};},
};
/script点击按钮效果如下 d你会发现当你定义的变量越多需要 return 的就越多代码可读性降低了不少. 我们实际上可以把一组关联的数据封装到对象中这样直接返回这个对象就可以了这样也要注意的是需要通过 对象.属性名 的方式获取属性.
templatedivname: {{ user.name }}/divdivage: {{ user.age }}/divdivweight: {{ user.weight }}/div
/templatescriptexport default {name: App,setup() {let user {name: cyk,age: 18,weight: 60kg,};return {user,};},
};
/scripte当然有一天你发现自己定义的对象越来越多最后 return 的东西越来越多可读性又降低了那么你可以借鉴 vue2 的方式这样定义数据doge setup() {let data {student: {//...},teacher: {//...},//......};return {data,};}, 1.3.2、ref 函数
什么是响应式数据
你可以简单的将响应式数据理解为动态数据也就是说你对响应式数据的修改在页面是会得到及时的反馈.
例如通过点击按钮对 name 进行修改操作同时希望页面能得到及时的反馈.
非响应式
templatedivname: {{ name }}/divbutton clickchangeName()点我改变 name/button
/templatescript
export default {name: App,setup() {let name cyk;function changeName() {name lyj;alert(修改完成!);}return {name,changeName,};},
};
/script点击按钮之后name 并没有修改这就是非响应式那么如果我们希望它是响应式就需要依靠 ref 函数了
ref 响应式处理
aref 就是用来处理一个响应式数据.
语法如下
// 创建一个响应式数据的引用对象(reference 对象简称 ref 对象)
const xxx ref(initValue)// js 中操作数据
xxx.value// 模板中读取数据
div{{xxx}}/div
使用步骤
引入 ref 组件这一步很容易忘记定义 响应式 对象返回对象
通过 console.log(ref(lyj))就可以观察到以下结果 ref 底层是通过 Object.defineProperty() 的 get 和 set 来实现响应式的 b例如通过点击按钮对 name 进行修改操作同时希望页面能得到及时的反馈.
templatedivname: {{ name }}/divbutton clickchangeName()点我改变 name/button
/templatescript
import { ref } from vue; //引入 ref 组件export default {name: App,setup() {let name ref(cyk); //这里返回的是一个对象通过 .value 就可以拿到值function changeName() {name.value lyj; //必须通过 value 才能获取到对应的值alert(修改完成!);}return {name,changeName,};},
};
/script点击按钮前
点击按钮后 c那么问题来了如果 ref 中的值是一个嵌套对象该怎么获取里面的值呢难道每嵌套一层都需要使用 value 来获取一层么
如果是嵌套对象我们可以先这样理解ref 就相当于对对象的一层封装嘛通过 .value 的方式就可以拿到对象此时对象无论怎么封装原先 js 语法怎么获取现在就怎么处理.
如下怎么获取 name 和 c 呢 let user ref({name: cyk,a: {b: {c: 666,},},}); name 就不多说了首先 ref 是通过里面的值是一个 {...} 对象因此通过 value 就可以拿到这个对象那么接下来通过对象拿属性值的方式获取即可. function getUser() {console.log(user);console.log(user.value.name);console.log(user.value.a.b.c);} 对于对象的处理 ref 底层是 调用了 reactive 的 Proxy 来实现响应式的并通过 Reflect 操作内部的数据. 1.3.3、reactive
a通过上面讲述可以看出ref 每次获取值都需要通过 .value 的方法获取很麻烦. 那么接下来要将的 reactive 就是用来解决这个问题的.
breactive 就是用来定义个 对象类型 的响应式数据基本类型不能用它只能使用 ref 函数. Ps实在想用你可以把基本类型封装成对象啊 creactive 内部是基于 ES6 的 Proxy 实现通过代理对象操作源对象内部数据进行操作.
d用法如下
templatediv{{ user.name }}/divdiv{{ user.age }}/divdiv{{ user.likes[2] }}/divdiv{{ user.a.b.c }}/divbutton clickchangeInfo点我改变信息/button
/templatescript
import { ref, reactive } from vue; //引入 reactive
export default {name: App,setup() {let tips ref(1);let user reactive({name: cyk,age: 18,likes: [唱歌, 弹琴, 谈情],a: {b: {c: 666,},},});function changeInfo() {// ref 定义的响应式对象需要通过 .value 的方式获取tips.value 2;// reactive 定义的响应式对象可以直接获取user.name lyj;user.age 17;user.likes[2] 谈锤子;user.a.b.c 999;}return {tips,user,changeInfo,};},
};
/script 1.3.4、reactive 对比 ref
a定义数据的角度
ref 可定义的数据基本类型、对象或数组类型 但是对于 对象或数组类型内部是通过 reactive 转为 代理对象。reactive 可定义的数据对象或数组类型.
b使用的角度
ref操作数据需要 .value 在模板中读取数据不需要 .valuereactive操作和读取数据都不用 .value
c原理角度
ref通过 Object.defineProperty() 的 get 与 set 来实现响应式.reactive通过使用 Proxy 来实现响应式并通过 Reflect 操作源对象内部的数据. 1.3.5、setup 的参数props、context
setup 的参数如下
aprops值为对象包含组件外部传递过来且组件内部声明接收了的属性
例如父组件向 User 子组件传递数据
templateUser namecyk :ageage /
/templatescript
import User from ./views/User.vue; //引入自定义的组件 User
export default {name: App,components: { User }, //声明setup() {let age 18;return {age,};},
};
/script
User 子组件中使用数据
templateh1我是一个学生/h1divname: {{ user.name }}/divdivage: {{ user.age }}/div
/templatescript
export default {name: User,props: [name, age],setup(props) {let user {name: props.name,age: props.age,};return {user,};},
};
/scriptbcontext上下文对象
atts值为对象包含组件外传递过来但没有在 props 配置中声明的属性相当于 this.$attrs.slots受到的插槽内容相当于 this.$slots.emit分发自定义事件的函数相当于 this.$emit.
父组件中定义 hello 事件自定义名为 helloBtn 传递给子组件 User.
template!-- 自定义传递的事件名当前组件 setup return 的函数 --User helloBtnhello namecyk :ageage /
/templatescript
import User from ./views/User.vue; //引入自定义的组件 User
export default {name: App,components: { User }, //声明setup() {let age 18;function hello() {alert(hello);}return {age,hello,};},
};
/script子组件中通过 emits 接收 helloBtn 事件
templateh1我是一个学生/h1divname: {{ user.name }}/divdivage: {{ user.age }}/divbutton clicktest父组件传递的事件/button
/templatescript
export default {name: User,props: [name, age],//拿到父组件传递的事件他会交给 setup 中的 context 参数emits: [helloBtn],setup(props, context) {let user {name: props.name,age: props.age,};function test() {//拿到父组件的事件context.emit(helloBtn);}return {user,test,};},
};
/script1.3.6、computed 计算属性
与 vue2.x 中的 computed 配置功能一样凡是需要实时计算的地方就使用它即可
a简写没有考虑计算属性被修改的情况
templateh1求和/h1divinput typenumber v-modeltest.a //divdivinput typenumber v-modeltest.b //divdiv结果: {{ result }}/div
/templatescript
import { computed, reactive } from vue;
export default {name: App,setup() {let test reactive({a: 0,b: 0,});let result computed(() {return test.a test.b;});return {test,result,};},
};
/scriptb完整写法重写 get set 方法考虑读和写
假设需求是读取时要 a 和 b 的和修改时要求得到 result 的均分到 a 和 b
templateh1求和/h1divinput typenumber v-modeltest.a //divdivinput typenumber v-modeltest.b //divdivspan结果: /spaninput typenumber v-modelresult //div
/templatescript
import { computed, reactive } from vue;
export default {name: App,setup() {let test reactive({a: 0,b: 0,});//简写没有考虑计算属性被修改的情况// let result computed(() {// return test.a test.b;// });//完整写法重写 get set 方法let result computed({get() {return test.a test.b;},set(value) {test.a value / 2;test.b value / 2;},});return {test,result,};},
};
/script
当 a 5、b 9 读取如下 当 result 15a 和 b 被修改的情况如下 Ps下一篇 “ Vue3 - 从入门到进阶这一套就够了案例 效果演示二”
