delete和Vue.delete(this.$delete)的區(qū)別
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
</head>
<body>
? ? <div id="app">
? ? ? ? {{message}}
? ? </div>
? ? <!-- 此行代碼要接觸注釋引入vue.js -->
? ? <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
? ? <script>
// 刪除數(shù)組
// delete:只是把數(shù)組元素的值變成empty或undefined，元素的鍵不變，數(shù)組長度不變
// Vue.$delete:直接刪除數(shù)組中的元素，改變數(shù)組的鍵值和長度
// 刪除對象
// 兩者相同，都會把鍵名（鍵名/字段）和鍵值刪除
// 共同點：兩者都不能刪除變量
? ? </script>
? ? <Script>
? ? ? ? var app = new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? message: 'Hello Vue!',
? ? ? ? ? ? ? ? object: {
? ? ? ? ? ? ? ? ? ? ? ? name: "xiaoming",
? ? ? ? ? ? ? ? ? ? ? ? age: 24,
? ? ? ? ? ? ? ? ? ? ? ? gender: "man",
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? array: [1, 2, 3, 4, 5]
? ? ? ? ? ? },
? ? ? ? ? ? mounted() {
? ? ? ? ? ? ? ? delete this.object.age
? ? ? ? ? ? ? ? console.log(this.object,"11111111111111111") ?//{name:"xiaoming",gender:"man"} ? ? //此處不知道為什么會被this.$delete()的代碼影響 對象只剩下{gender:"man"}
? ? ? ? ? ? ? ? // this.$delete(this.object, "name")
? ? ? ? ? ? ? ? // console.log(this.object,"22222222222222222") ?//{gender:"man"}
? ? ? ? ? ? ? ? let that = this
? ? ? ? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? ? ? ? that.$delete(that.object, "name")
? ? ? ? ? ? ? ? ? ? console.log(that.object,"22222222222222222")
? ? ? ? ? ? ? ? },1000)
? ? ? ? ? ? ? ? //計時器延時后，還是會影響上面的代碼
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? delete this.array[3]
? ? ? ? ? ? ? ? console.log(this.array,"333333333333333333") ?//[1, 2, 3, empty, 5]
? ? ? ? ? ? ? ? console.log(this.array.length) ?//5
? ? ? ? ? ? ? ? this.$delete(this.array, 0)
? ? ? ? ? ? ? ? console.log(this.array,"444444444444444444") //[2, 3, empty, 5]
? ? ? ? ? ? }
? ? ? ? })
? ? </Script>
</body>
</html>
