本篇是基于vue2.0平台,安装 npm install vue-function-api --save
最近新出的是@vue/composition-api ,安装npm install @vue/composition-api --save
学习参考文献 :
https://github.com/vuejs/composition-api/blob/HEAD/README.zh-CN.md
https://composition-api.vuejs.org/zh/#api-%E4%BB%8B%E7%BB%8D
{{hText}}
Count is: {{ state.count }}, double is: {{ double }},counut2 is :{{count2}}
- 姓名:{{state.name}}
- 性别:{{ state.sex }}
- 年龄:{{ state.age }}
- 数量:{{ state.count }}
更新State
这里是一个计数器 >>> {{count2}}
十倍 >>> {{tenCount}}
一百倍 >>> {{computeCount['one']}}
一千倍 >>> {{computeCount['two']}}
更新count2
import { reactive , ref , computed , toRefs} from 'vue-function-api'
export default {
name: 'App',
//注意,引入的vue-function-api 都 写在setup(){} 函数里
//结构 export default { setup(){ }, }
setup(props,context) {// 参数 非必传
const resobj=toRefs({name:'Owen',age:20,childrens:[{name:'bigboy',age:6},{name:'smallboy',age:3}]}) // toRefs(obj)
console.log(resobj.name.value); // Owen
console.log(resobj.childrens.value[0].name);//bigboy
console.log(this)//获取不到 是个 空对象 {}
const root = context.root; // 获得Vue的实例
console.log(props);//
console.log(context);// 这个vue3获取 不到 this,用context.root 代替this 取到Vue
//1.定义一个不需要改变的数据
const hText = 'vue3新特性'
//2.定义一个count的响应数据,并赋值为0 ,使用ref()---创建响应值类型, 3.0使用proxy拦截劫持数据的
const count2 = ref(2) //取值的时候 count2.value
console.log(count2);//RefImpl {value:2}
console.log(count2.value) // 2 取值
//3.reactive(),用于创建响应式的对象或数组
const state = reactive({
name:'Owen',
sex:'men',
age:30,
count: 0,
// double: computed(() => state.count * 2) // 放在这里不响应计算属性
})
console.log(state)
const double = computed(() => state.count * 2) // 计算属性
function increment() {
state.count++;
count2.value++
}
function changeState(){
state.count++;
state.age++;
}
//计算属性computed()
const Add= () =>{
count2.value++
}
// 计算属性,使用计算函数并命名,然后在 return 中导出即可
const tenCount = computed(() => {
return count2.value * 10
})
// 计算 多个 属性,可以通过返回一个对象的方式来实现
const computeCount = computed(() => {
return {
'one': count2.value * 100,
'two': count2.value * 1000,
}
})
// 只有被return 的成员 才能被ui结构访问(需要使用的 计算属性,数据,方法)
return {
state,
increment,
double,
count2,
hText,
changeState,
tenCount,
computeCount,
Add
}
}
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
2.生命周期:testLIfe.vue
测试生命周期 >>> {{count}}
// 你需要使用到什么生命周期,就引出来什么生命周期
import {
onCreated,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeDestroy,
onDestroyed,
ref
} from 'vue-function-api'
export default {
// setup 函数,就相当于 vue 2.0 中的 created
// 4 生命周期: created--onCreated beforeDestroy--onBeforeDestroy destroyed--onDestroyed
//4.生命周期:vue2上+on beforeMount-onBeforeMount mounted-onMounted beforeUpdate-onBeforeUpdate updated--onUpdated
setup () {
const count = ref(0)
console.log(count.value)
onCreated(() => {
count.value++
console.log('onCreated', count.value)
})
// const count = ref(0)
// 其他的生命周期都写在这里
onBeforeMount (() => {
count.value++
console.log('onBeforeMount', count.value)
})
onMounted (() => {
count.value++
console.log('onMounted', count.value)
})
// 注意,onBeforeUpdate 和 onUpdated 里面不要修改值,会死循环的哦!
onBeforeUpdate (() => {
console.log('onBeforeUpdate', count.value)
})
onUpdated (() => {
console.log('onUpdated', count.value)
})
onBeforeDestroy (() => {
count.value++
console.log('onBeforeDestroy', count.value)
})
onDestroyed (() => {
count.value++
console.log('onDestroyed', count.value)
})
// 定义一个函数,修改 count 的值。
const countAdd = () => {
count.value++
}
return {
count,
countAdd
}
},
mounted(){// 旧版的生命周期会先执行, 新旧版本不要混合用, 这个只是举例
console.log('我是旧的mounted')
}
}