国建设银行e路通网站申,陕西网站建设通报,尚易企业邮箱,好的网站开发培训setup Vue3中使用了Composition API这种写法#xff0c;使得所有的组合API函数都在此使用, 只在初始化时执行一次。 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用 ref 作用#xff1a;定义一个数据的响应式 语法#xff1a;const xxx ref(initValue) 一般用来…setup Vue3中使用了Composition API这种写法使得所有的组合API函数都在此使用, 只在初始化时执行一次。 函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用 ref 作用定义一个数据的响应式 语法const xxx ref(initValue) 一般用来定义一个基本类型的响应式数据 创建一个包含响应式数据的引用(reference)对象js中操作数据: xxx.value模板中操作数据: 不需要.value
结合setup 和 ref 使用说明
其中vue2的写法为
templateh2{{count}}/h2hrbutton clickupdate更新/button
/templatescript
export default {/* 在Vue3中依然可以使用data和methods配置, 但建议使用其新语法实现 */data () {return {count: 0}},methods: {update () {this.count}}
}
/scriptvue3的写法为
setup最终会返回一个对象并且对象中的值可以在模板中使用如count保证响应式必须使用ref
templateh2{{count}}/h2hrbutton clickupdate更新/button
/templatescript
import {ref
} from vue
export default {/* 使用vue3的composition API */setup () {// 定义响应式数据 ref对象const count ref(1)console.log(count)// 更新响应式数据的函数function update () {count.value count.value 1}return {count,update}}
}
/scriptreactive 作用定义多个数据的响应式例如一个对象 const isProxy reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象 响应式转换是“深层的”会影响对象内部所有嵌套的属性 内部基于 ES6 的 Proxy 实现通过代理对象操作源对象内部数据都是响应式的 templateh2name: {{state.name}}/h2h2age: {{state.age}}/h2h2wife: {{state.wife}}/h2hrbutton clickupdate更新/button
/templatescript
import { reactive } from vue
export default {setup () {/* 定义响应式数据对象 */let obj {name: tom,age: 25,wife: {name: marry,age: 22},};// 此时state通过 reactive代理了obj使其内属性成为响应式的const state reactive(obj)// 此时打印state 会得到一个Proxy的一个对象// state---代理对象obj---目标对象console.log(state)const update () {state.name --state.age 1state.wife.name state.wife.age 2}return {state,update,}}
}
/script总结如果操作代理对象目标对象中的值也会跟着改变如果想要页面跟着渲染也是操作代理对象
vue3响应式虽然写起来麻烦但是减少了vue2响应式带来的性能开销
