1.計(jì)算屬性computed與監(jiān)聽屬性watch的區(qū)別

? ?1>計(jì)算屬性是依賴的屬性值改變后，將計(jì)算屬性的返回值作為最新結(jié)果，所以，里面不能異步的返回結(jié)果，不可以寫異步邏輯。

? ?2>監(jiān)聽屬性是監(jiān)聽的值改變后會(huì)重新執(zhí)行函數(shù)，將一個(gè)值重新賦值作為返回結(jié)果，可以寫異步邏輯。

? ? 示例如下：

? ??<div?id="app">

????????<div>

??????????{{msg}}

????????</div>

????????<div>

??????????{{newValue}}

????????</div>

????????<button?@click="handleClick">點(diǎn)擊</button>

??????</div>

??????<script>

????????let?vm?=?new?Vue({

??????????el:?'#app',

??????????data:?{

????????????msg:?'hello',

????????????newValue:?''

??????????},

??????????methods:?{

????????????handleClick?()?{

??????????????this.msg?=?'hello1'

????????????}

??????????},

??????????watch:?{

????????????msg?(newValue)?{

??????????????setTimeout(()?=>?{

????????????????this.newValue?=?newValue

??????????????},?1000);

????????????}

??????????}

????????})

??????</script>

結(jié)果：

watch屬性監(jiān)聽

????????let?vm?=?new?Vue({??????????el:?'#app',??????????data:?{????????????msg:?'hello',????????????temp:?''??????????},??????????computed:?{????????????newValue?()?{??????????????if?(this.temp)?{????????????????//?不能寫異步????????????????//?setTimeout(()?=>?{????????????????//???return?msg????????????????//?},?1000);????????????????return?this.msg??????????????}?else?{????????????????return?this.temp??????????????}????????????}??????????},??????????methods:?{????????????handleClick?()?{??????????????this.msg?=?'hello1'??????????????this.temp?=?'hello1'????????????}??????????}????????})???????????????let?vm?=?new?Vue({??????????el:?'#app',??????????data:?{????????????msg:?'hello',????????????temp:?''??????????},??????????computed:?{????????????newValue?()?{??????????????if?(this.temp)?{????????????????//?不能寫異步????????????????//?setTimeout(()?=>?{????????????????//???return?msg????????????????//?},?1000);????????????????return?this.msg??????????????}?else?{????????????????return?this.temp??????????????}????????????}??????????},??????????methods:?{????????????handleClick?()?{??????????????this.msg?=?'hello1'??????????????this.temp?=?'hello1'????????????}??????????}????????})???????????????let?vm?=?new?Vue({??????????el:?'#app',??????????data:?{????????????msg:?'hello',????????????temp:?''??????????},??????????computed:?{????????????newValue?()?{??????????????if?(this.temp)?{????????????????//?不能寫異步????????????????//?setTimeout(()?=>?{????????????????//???return?msg????????????????//?},?1000);????????????????return?this.msg??????????????}?else?{????????????????return?this.temp??????????????}????????????}??????????},??????????methods:?{????????????handleClick?()?{??????????????this.msg?=?'hello1'??????????????this.temp?=?'hello1'????????????}??????????}????????})???????<script>

????????let?vm?=?new?Vue({

??????????el:?'#app',

??????????data:?{

????????????msg:?'hello',

????????????temp:?''

??????????},

??????????computed:?{

????????????newValue?()?{

??????????????if?(this.temp)?{

????????????????//?不能寫異步

????????????????//?setTimeout(()?=>?{

????????????????//???return?msg

????????????????//?},?1000);

????????????????return?this.msg

??????????????}?else?{

????????????????return?this.temp

??????????????}

????????????}

??????????},

??????????methods:?{

????????????handleClick?()?{

??????????????this.msg?=?'hello1'

??????????????this.temp?=?'hello1'

????????????}

??????????}

????????})

??????</script>

輸出結(jié)果是一樣的，但是不支持一秒后輸出。

2.計(jì)算屬性computed與methods方法的區(qū)別

? ? 1>計(jì)算屬性是基于所依賴的數(shù)據(jù)是否更新，如果相關(guān)的響應(yīng)式依賴有改變才會(huì)更新，而方法是每次都會(huì)執(zhí)行。

? ? 2>計(jì)算屬性是存在緩存的，如果數(shù)據(jù)沒有發(fā)生改變，每次取值都是從緩存里取值。

? ? 示例如下：

? ??<div?id="app"></div>

????<button?onclick="fun1()">點(diǎn)擊執(zhí)行fun1</button>

????<script>

????????var?vm?=?new?Vue({

????????????el:'#app',

????????????data:{

????????????????num:8

????????????},

????????????computed:{

????????????????getnum1(){

????????????????????console.log(new?Date())

????????????????????return?this.num-1

????????????????}

????????????},

????????????methods:{

????????????????getnum2(){

????????????????????console.log(new?Date())

????????????????????return?this.num-1

????????????????}

????????????}

????????});

????????function?fun1(params)?{

????????????setInterval(()?=>?{

????????????????//?console.log(vm.getnum1)

????????????????console.log(vm.getnum2())

????????????},?1000);

????????}

????</script>

? ? 打印結(jié)果為：

methods方法打印結(jié)果

computed屬性打印結(jié)果

3.計(jì)算屬性與數(shù)據(jù)存儲(chǔ)data屬性的區(qū)別

計(jì)算屬性也是對(duì)數(shù)據(jù)進(jìn)行存儲(chǔ)的，調(diào)用方式是一樣的，例如

data中的數(shù)據(jù)：{{num}}

computed中的數(shù)據(jù)：{{getNum}}

注意：計(jì)算屬性是對(duì)數(shù)據(jù)進(jìn)行業(yè)務(wù)邏輯的處理，也可以對(duì)計(jì)算屬性中的數(shù)據(jù)進(jìn)行監(jiān)聽。