网站配色,wordpress 分类树,临沂市兰山区建设局网站,wordpress 多站点 主题本文的目的#xff0c;是为了让已经有 Vue2 开发经验的 人 #xff0c;快速掌握 Vue3 的写法。 一、Vue3 里 script 的三种写法
首先#xff0c;Vue3 新增了一个叫做组合式 api 的东西#xff0c;英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法#x…本文的目的是为了让已经有 Vue2 开发经验的 人 快速掌握 Vue3 的写法。 一、Vue3 里 script 的三种写法
首先Vue3 新增了一个叫做组合式 api 的东西英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法
1、最基本的 Vue2 写法
templatediv{{ count }}/divbutton clickonClick增加 1/button
/templatescript
export default {data() {return {count: 1,};},methods: {onClick() {this.count 1;},},
}
/script
2、setup() 属性
templatediv{{ count }}/divbutton clickonClick增加 1/button
/templatescript
import { ref } from vue;
export default {// 注意这部分setup() {let count ref(1);const onClick () {count.value 1;};return {count,onClick,};},}
/script
3、script setup
templatediv{{ count }}/divbutton clickonClick增加 1/button
/templatescript setup
import { ref } from vue;const count ref(1);
const onClick () {count.value 1;
};
/script
第一种写法跟过去 Vue2 的写法是一样的所以我们不过多介绍。
第二种写法所有的对象和方法都需要 return 才能使用太啰嗦。除了旧项目可以用这种方式体验 Vue3 的新特性以外我个人不建议了解这种方式。反正我自己暂时不打算精进这部分。
所以接下来我们主要介绍的也就是 script setup 这种写法里需要了解的内容。
注意 script setup 本质上是第二种写法的语法糖掌握了这种写法其实第二种写法也基本上就会了。又多了一个不学第二种写法的理由。
二、如何使用 script setup 编写组件
学习 Vue3 并不代表你需要新学习一个技术Vue3 的底层开发思想跟 Vue2 是没有差别的。
V3 和 V2 的区别就像是你用不同的语言或者方言说同一句话。
所以我们需要关心的就是 Vue2 里的内容怎么用 Vue3 的方式写出来。
1、data——唯一需要注意的地方
整个 data 这一部分的内容你只需要记住下面这一点。
以前在 data 中创建的属性现在全都用 ref() 声明。
在 template 中直接用在 script 中记得加 .value 。
1写法对比
// Vue2 的写法templatediv{{ count }}/divbutton clickonClick增加 1/button
/templatescript
export default {data() {return {count: 1,};},methods: {onClick() {this.count 1;},},
}
/script
// Vue3 的写法templatediv{{ count }}/divbutton clickonClick增加 1/button
/templatescript setup
import { ref } from vue;// 用这种方式声明
const count ref(1);const onClick () {// 使用的时候记得 .valuecount.value 1;
};
/script
2注意事项——组合式 api 的心智负担
a、ref 和 reactive
Vue3 里还提供了一个叫做 reactive 的 api。
但是我的建议是你不需要关心它。绝大多数场景下ref 都够用了。
b、什么时候用 ref() 包裹什么时候不用。
要不要用ref就看你的这个变量的值改变了以后页面要不要跟着变。
当然你可以完全不需要关心这一点跟过去写 data 一样就行。
只不过这样做你在使用的时候需要一直 .value。
c、不要解构使用
在使用时不要像下面这样去写会丢失响应性。
也就是会出现更新了值但是页面没有更新的情况
// Vue3 的写法
templatediv{{ count }}/divbutton clickonClick增加 1/button
/templatescript setup
import { ref } from vue;const count ref(1);
const onClick () {// 不要这样写const { value } count;value 1;
};
/script
2、methods
声明事件方法我们只需要在 script 标签里创建一个方法对象即可。
剩下的在 Vue2 里是怎么写的Vue3 是同样的写法。
// Vue2 的写法
templatediv clickonClick这是一个div/div
/templatescript
export default {methods: {onClick() {console.log(clicked)},},
}
/script
// Vue3 的写法
templatediv clickonClick这是一个div/div
/templatescript setup// 注意这部分
const onClick () {console.log(clicked)
}/script
3、props
声明 props 我们可以用 defineProps()具体写法我们看代码。
1写法对比
// Vue2 的写法
templatediv{{ foo }}/div
/templatescript
export default {props: {foo: String,},created() {console.log(this.foo);},
}
/script
// Vue3 的写法
templatediv{{ foo }}/div
/templatescript setup// 注意这里
const props defineProps({foo: String
})// 在 script 标签里使用
console.log(props.foo)
/script
2注意事项——组合式 api 的心智负担
使用 props 时同样注意不要使用解构的方式。
script setup
const props defineProps({foo: String
})// 不要这样写
const { foo } props;
console.log(foo)
/script
4、emits 事件
与 props 相同声明 emits 我们可以用 defineEmits()具体写法我们看代码。
// Vue2 的写法
templatediv clickonClick这是一个div/div
/templatescript
export default {emits: [click], // 注意这里methods: {onClick() {this.$emit(click); // 注意这里},},}
/script
// Vue3 的写法
templatediv clickonClick这是一个div/div
/templatescript setup// 注意这里
const emit defineEmits([click]);const onClick () {emit(click) // 注意这里
}/script
5、computed
直接上写法对比。
// Vue2 的写法
templatedivspan{{ value }}/spanspan{{ reversedValue }}/span/div
/templatescript
export default {data() {return {value: this is a value,};},computed: {reversedValue() {return value.split().reverse().join();},},
}
/script
// Vue3 的写法
templatedivspan{{ value }}/spanspan{{ reversedValue }}/span/div
/templatescript setup
import {ref, computed} from vue
const value ref(this is a value)// 注意这里
const reversedValue computed(() {// 使用 ref 需要 .valuereturn value.value.split().reverse().join();
})/script
6、watch
这一部分我们需要注意一下了Vue3 中watch 有两种写法。一种是直接使用 watch还有一种是使用 watchEffect。
两种写法的区别是
watch 需要你明确指定依赖的变量才能做到监听效果。而 watchEffect 会根据你使用的变量自动的实现监听效果。
1直接使用 watch
// Vue2 的写法
templatediv{{ count }}/divdiv{{ anotherCount }}/divbutton clickonClick增加 1/button
/templatescript
export default {data() {return { count: 1,anotherCount: 0,};},methods: {onClick() {this.count 1;},},watch: {count(newValue) {this.anotherCount newValue - 1;},},
}
/script
// Vue3 的写法
templatediv{{ count }}/divdiv{{ anotherCount }}/divbutton clickonClick增加 1/button
/templatescript setup
import { ref, watch } from vue;const count ref(1);
const onClick () {count.value 1;
};const anotherCount ref(0);// 注意这里
// 需要在这里
// 明确指定依赖的是 count 这个变量
watch(count, (newValue) {anotherCount.value newValue - 1;
})/script
2使用 watchEffect
// Vue2 的写法
templatediv{{ count }}/divdiv{{ anotherCount }}/divbutton clickonClick增加 1/button
/templatescript
export default {data() {return { count: 1,anotherCount: 0,};},methods: {onClick() {this.count 1;},},watch: {count(newValue) {this.anotherCount newValue - 1;},},
}
/script
// Vue3 的写法
templatediv{{ count }}/divdiv{{ anotherCount }}/divbutton clickonClick增加 1/button
/templatescript setup
import { ref, watchEffect } from vue;const count ref(1);
const onClick () {count.value 1;
};const anotherCount ref(0);// 注意这里
watchEffect(() {// 会自动根据 count.value 的变化// 触发下面的操作anotherCount.value count.value - 1;
})/script
7、生命周期
Vue3 里除了将两个 destroy 相关的钩子改成了 unmount剩下的需要注意的就是在 script setup 中不能使用 beforeCreate 和 created 两个钩子。
如果你熟悉相关的生命周期只需要记得在 setup 里用 on 开头加上大写首字母就行。
// 选项式 api 写法
templatediv/div
/templatescript
export default {beforeCreate() {},created() {},beforeMount() {},mounted() {},beforeUpdate() {},updated() {},// Vue2 里叫 beforeDestroybeforeUnmount() {},// Vue2 里叫 destroyedunmounted() {},// 其他钩子不常用所以不列了。
}
/script
/ 组合式 api 写法
templatediv/div
/templatescript setup
import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,
} from vueonBeforeMount(() {})
onMounted(() {})onBeforeUpdate(() {})
onUpdated(() {})onBeforeUnmount(() {})
onUnmounted(() {})
/script
三、全局Api的转移很重要
2.x 全局 API Vue3.x 实例 API(app)Vue.config.xxxxapp.config.xxxxVue.config.productionTip移除Vue.componentapp.componentVue.directiveapp.directiveVue.mixinapp.mixinVue.useapp.useVue.prototypeapp.config.globalProperties
vue2中可以通过Vue.prototype去操作原型在vue3中只能通过app.config.globalProperties
四、provide与inject
在vue2中如果要在后代组件中使用父组件的数据那么要一层一层的父子组件传值或者用到vuex但是现在无论组件层次结构有多深父组件都可以作为其所有子组件的依赖提供者。
这个特性有两个部分父组件有一个 provide 选项来提供数据子组件有一个 inject 选项来开始使用这些数据。
//父
import { provide } from vue
setup(){let fullname reactive({name:阿月,salary:15k})provide(fullname,fullname) //给自己的后代组件传递数据return {...toRefs(fullname)}
}
//后代
import {inject} from vue
setup(){let fullname inject(fullname)return {fullname}
}
