如何用ps做网站图标,吉林省长春市建设局网站,太原网建科技有限公司,如何仿网站模板setup
Vue3.0中一个新的配置项#xff0c;值为一个函数。组件中所用到的#xff1a;数据、方法等等#xff0c;均要配置在setup中。setup函数的两种返回值#xff1a; 若返回一个对象#xff0c;则对象中的属性、方法#xff0c;在模板中均可以直接使用。#xff08;重…setup
Vue3.0中一个新的配置项值为一个函数。组件中所用到的数据、方法等等均要配置在setup中。setup函数的两种返回值 若返回一个对象则对象中的属性、方法在模板中均可以直接使用。重点关注若返回一个渲染函数则可以自定义渲染内容。了解 注意点 尽量不要与Vue2.x配置混用 Vue2.x配置data、methos、computed…中可以访问到setup中的属性、方法。但在setup中不能访问到Vue2.x配置data、methos、computed…。如果有重名setup优先。 setup不能是一个async函数因为返回值不再是return的对象, 而是promise模板看不到return对象中的属性。后期也可以返回一个Promise实例但需要Suspense和异步组件的配合
templateh1个人信息/h1h2姓名input typetext v-modelname/h2h2年龄input typetext v-modelage/h2button clickchangeInfo更改信息/button
/templatescriptexport default {name: App,components: {},// 这个例子不是响应式的setup() {let name zhenchenglilet age 20function changeInfo() {// 这个例子中, 这样修改后页面上的数据不会响应变化name lzcage 18}// 需要将数据和方法返回return {name,age,changeInfo}}}
/scriptref
作用定义一个响应式的数据
语法 const xxx ref(initValue)
创建一个包含响应式数据的引用对象。JS中操作数据 xxx.value模板中读取数据: 不需要xxx.value直接div{{xxx}}/div
备注
接收的数据可以是基本类型、也可以是对象类型。基本类型的数据响应式依然是靠Object.defineProperty()的get与set完成的。对象类型的数据内部使用的是Vue3.0中的一个新函数—— reactive函数。
templateh1个人信息/h1h2姓名input typetext v-modelname/h2h2年龄input typetext v-modelage/h2h2岗位input typetext v-modeljob.type/h2h2薪水input typetext v-modeljob.salary/h2button clickchangeInfo更改信息/button
/templatescriptimport {ref} from vue;export default {name: App,components: {},setup() {// 使用ref会生成一个RefImpl实例对象, 数据才能响应式let name ref(zhenchengli)let age ref(20)let job ref({type:Java开发,salary:1k})function changeInfo() {console.log(name)console.log(age)console.log(job.value)// 修改RefImpl对象的值name.value lzcage.value 18job.value.type 前端开发job.value.salary 2k}return {name,age,job,changeInfo}}}
/scriptreactive
作用定义一个对象类型的响应式数据基本类型不要用它基本类型用ref函数语法const 代理对象 reactive(源对象)接收一个对象或数组返回一个代理对象Proxy的实例对象reactive定义的响应式数据是“深层次的”。内部基于 ES6 的 Proxy 实现通过代理对象操作源对象内部数据进行操作。
templateh1个人信息/h1h2姓名input typetext v-modelperson.name/h2h2年龄input typetext v-modelperson.age/h2h2岗位input typetext v-modelperson.job.type/h2h2薪水input typetext v-modelperson.job.salary/h2h2爱好{{person.hobby}}/h2button clickchangeInfo更改信息/button!-- router-view/--
/templatescriptimport {reactive} from vue;export default {name: App,components: {},setup() {const person reactive({name:zhenchengli,age:20,job: {type:Java开发,salary:1k},hobby:[跑步,打球]})function changeInfo() {console.log(person)person.name lzcperson.age 18person.job.type 前端开发person.job.salary 2k// 可以直接通过索引修改 vue2中不能这样修改person.hobby[0] 唱歌}// 将对象、方法返回return {person,changeInfo}}}
/script响应式原理
