VUE3(setup响应式函数系统API)

Vue3.0提供的一组具有响应式特性的杉树式API，以函数的形式提供
1、reactive
reactive（）函数接收一个普通对象，返回该普通对象的响应式代理对象
2、ref
ref（）函数接收一个参数值，返回一个响应式的数据对象。该对象只包含一个指向内部值的.value属性
3、computed
computed（）函数用来创建计算属性，函数的返回值是一个ref的实例
4、readonly

readonly（）函数接收一个对象（普通或者响应式），返回一个原始对象只读代理对象
5、watch
watch（）函数用来监听数据的变化，从而出发特定的操作
6、watchEffect
watchEffect（）函数接收一个函数作为参数，并立即执行该函数，同时响应式追踪其依赖，并在其依赖变更时，重新运行该函数。

reactive.vue

<template><div><p>{{name}}</p><button @click="name='juju'">修改name</button></div>
</template><script>//1、导入reactive响应函数import { reactive } from 'vue'export default{setup(){//2、创建响应式对象，是一个代理对象const data=reactive({name:'htt',age:22})return data}}
</script><style>
</style>

ref.vue

<template><div><!-- 在模板中访问时，无需通过value属性,它会自动展开 --><p>{{ num }}</p><button @click="change">修改count</button></div>
</template><script>//导入ref函数import {ref} from 'vue'export default{setup(){//创建响应对象const num=ref(1)console.log(num.value)const change=()=>{num.value=5}//setup导出数据都要return，可以是函数，也可以是数据return {num,change}},//以后经常使用的就是setup，不是datadata(){return{}}}
</script><style>
</style>

computed.vue

<template><div><p>{{hg}}</p><p>{{ss}}</p></div>
</template><script>import {computed,ref} from 'vue'export default{setup(){const hg=ref(1)//创建一个只读的计算属性const ss=computed(()=>{return hg.value+1})//创建一个可读可写的计算属性const pk=computed({get(){return hg.value+1},set(hg){hg.value=hg}})return {hg,ss,pk}}}
</script><style>
</style>

readonly.vue

<template><div></div>
</template><script>import {reactive,readonly} from 'vue'export default{setup(){const obj =reactive({conunt:1})//代理了响应式对象const proxy=readonly(obj)console.log(obj)console.log(proxy)//代理只读对象是不允许修改的//修改原始对象时代理对象也会响应式变化}}
</script><style>
</style>

watch.vue和watchEffect.vue

<template><div><!-- 点击之后就停止监视 --><button @click="unwatch">停止监视</button></div>
</template><script>import {watch,reactive} from 'vue'export default{setup(){const state=reactive({count:1})//监视数据的变化,会返回一个用于取消监视的函数//当数据发生改变擦会启动监视，不会立即启动监视// const unwatch=watch(() =>//    state.count,(oldValue,newValue)=>{//    console.log(oldValue,newValue)// })//先立即执行传入的函数//当函数内依赖的数据发生变化时会再次执行函数watchEffect(()=>{console.log(state.count)})return {state,unwatch}}
</script><style>
</style>

App.vue


<template><!-- <comp-setup msg="welcome"></comp-setup> --><comp-reactive></comp-reactive><comp-ref></comp-ref><comp-computed></comp-computed><comp-reonly></comp-reonly><comp-watch></comp-watch>
</template><script>
/*eslint no-mixed-spaces-and-tabs: ["error", "smart-tabs"]*/
// import CompSetup from './components/setupview'
import CompReactive from './components/reactive.vue'
import CompRef from './components/ref.vue'
import CompComputed from './components/compud.vue'
import CompReonly from './components/reonly.vue'
import CompWatch from './components/watch.vue'
export default {name: 'App',components: {// CompSetup,CompReactive,CompRef,CompComputed,CompReonly,CompWatch,}
}
</script><style></style>

VUE3(setup响应式函数系统API)相关推荐

vue3.0 Beta发布，顺便来看看Vue3 的响应式和以前有什么区别
前言 vue 3.0 Beta 测试版发布可以通过vue-cli-plugin-vue-next创建一个vue3.0的beta项目. 目前尚不支持IE11,后期可能会处理兼容版本. 对vue3源码有 ...
vue3.0响应式源码实践,vue3.0初体验
vue3.0响应式源码实践,vue3.0初体验镇楼图--杀生丸.jpg vue-next(vue3.0预体验) 1. 使用: 2.vue-next的目录结构 3. reactive内部实现作者上篇 ...
Vue3的响应式原理解析
Vue3的响应式原理解析 Vue2响应式原理回顾 // 1.对象响应化:遍历每个key,定义getter.setter // 2.数组响应化:覆盖数组原型方法,额外增加通知逻辑 const origi ...
城乡投票源码php_响应式投票系统(支持微信、手机) php版 v3.2
响应式投票系统(支持微信,手机)是一个PHP+MYSQL响应式投票系统,兼容手机,平板,PC电脑. 数据库文件可以直接导入,数据库配置文件index.php,请在导入前建立好数据库文件夹votesys ...
html5模板欧美风格,红色欧美风格响应式后台系统网页模板
模板描述:红色欧美响应式后台系统.红色欧美风格响应式后台系统网页模板html模板下载代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Close Search DarkAdmin ...
CSS - 响应式布局（二）响应式栅格系统
目录响应式栅格系统栅格栅格系统响应式栅格系统 BootStrap响应式栅格系统简单说明利用SCSS实现BootStrap的响应式栅格系统响应式栅格系统栅格在弄清楚响应式栅格系统前,我 ...
vue3基础-响应式 API 之 ref 和 reactive
背景我们知道ref函数和reactive函数用于实现数据的响应性. ref 在 Vue 3中,我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用,如下所示: import { ref ...
vue3基础-响应式 API 之 unref、toRef、toRefs、isRef
unref 如果参数是一个 ref,则返回内部值,否则返回参数本身. toRef 将对象的某个属性转为响应式,修改值时原始值也会改变,但是值改变不会更新视图使用示例: <template> ...
Vue3 数据响应式
在vue3中一般返回的数据是不响应的,如果需要响应式需要在定义时声明方法1:reactive(): 定义:reactive()是一个函数,可以用来定义复杂数据类型完成响应式 ...

VUE3(setup响应式函数系统API)

VUE3(setup响应式函数系统API)相关推荐

最新文章

热门文章