VUE2快速入门(六)---实例property(重点)

小咪咪 2022-12-25 00:53 95阅读 0赞

### 实例 ###

*  VUE2
 *   *  数据data
     *  父子传值props
     *  获取元素refs
     *  获取元素属性el
     *  实例属性options
     *  父实例parent
     *  根实例root
     *  插槽slots
     *  爷孙传值attrs
 *  重点★★★property
 *   *  自定义实例
     *  自定义实例方法
     *  使用场景
     *   *  全局引入js文件的某个方法
         *  全局引入整个js文件
 *  实例方法
 *   *  监听$watch
     *   *  deep
         *  取消监听
         *  immediate
     *  emit
     *  forceUpdate
     *  $nextTick
 *  VUE3新特性

> VUE中也有很多实例，我们来讲一讲这些实例

# VUE2 #

## 数据data ##

我们在组件中会定义数据

data() {
        return {
          text: "I,dog",
          show: true,
          post: { name: "代码哈士奇", id: 741741741 },
          datas:[{ name: "代码哈士奇", id: 1 },{ name: "哈哈", id: 2 }],
          lookData: ""
        };
      },

一般我们读取的时候 直接this,text就能得到"I,dog"  
其实还可以这样写

this.$data.text

效果一样  
![在这里插入图片描述][20201129201301284.png]  
其实data是通过property引入的

在本文会详细讲下

## 父子传值props ##

我们之前用插槽得时候讲过它  
传送门 ： [组件][Link 1]  
同data一样，按照文档的话

> 组件实例代理了对其 props 对象 property 的访问

调用  
比如

props: ["mdshowd"],
    
    
     console.log(this.$props.mdshowd)或者 console.log(this.mdshowd)

一般使用this.mdshowd

## 获取元素refs ##

获取有ref属性的元素或者组件  
用法如下

> 注：model是我们自己定义的组件，详细可看上一篇文章 [插槽][Link 1]

调用方法

this.$refs.modelOne

打印下看看

console.log(this.$refs.modelOne)

![在这里插入图片描述][2020112922253716.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]使用场景  
获取文件 或者元素/组件属性

## 获取元素属性el ##

是ref获取的其中一个属性  
![在这里插入图片描述][2020112922272114.png]

可以理解为  
document.getElementById()获取的内容

<model :mdshowd="show" @close="show = true" ref="modelOne" >
    </model>
    
      console.log(this.$refs.modelOne.$el)
      console.log(this.$refs.modelOne)
      console.log(document.getElementById("one"))

这里可以看出和document.getElementById()作用相同  
![在这里插入图片描述][2020112922213221.png]

## 实例属性options ##

读取实例的属性  
data中会写一些数据  
但是data外的 比如我们给当前页面加一个属性

data() {
        return {
          text: "I,dog"
        };
      },
    dmhsq: "dog"//这里没有写在data里面

那么要如何读取呢

this.$options.dmhsq

![在这里插入图片描述][20201129224158508.png]  
如果我们直接打印呢

console.log(this.$options)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]  
看到dmhsq了吧 其实是我啦  
这里打印了本实例的所有属性  
当然我们还看到了parent属性 就是父亲的意思  
接着看**⬇**

## 父实例parent ##

获取父实例  
比如我在test实例中使用了model，那么test就是model的父实例  
而test的父实例就是我们挂载的app $mount("\#app");

前提是得有

this.$parent

我们打印它

console.log(this.$parent)

![在这里插入图片描述][20201129224612918.png]  
展开后  
我们发现其实和options里面的parent一模一样 其实parent也是实例的一个属性  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]

## 根实例root ##

读取根实例，如果没用父实例，就返回自己

this.$root

比如我在test实例中使用了model，那么test就是model的父实例，app就是根实例  
我们在model中打印

console.log(this.$root)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]  
发现el中是id=app的实例 就是根实例  
我们也可以在它的孩子的孩子里面找到我们的model  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 4]![在这里插入图片描述][20201129225655193.png]

## 插槽slots ##

访问插槽内容

this.$slots

我们使用model做插槽

父实例中如下调用

<template>
      <div>
        <div v-for="item in datas" :key="item.id">
          <div>{
       {item.name}}==={
       {item.id}}</div>
          <button @click="look(item)">查看</button>
        </div>
        <model :mdshowd="show" @close="show = true" ref="modelOne" id="one">
          <template slot="title">{
       {lookData.name}}</template>
          <template slot="message">
            我叫{
       {lookData.name}},我的代号是{
       {lookData.id}}
          </template>
          <template slot="btnGroup">
            <button @click="closeLook">关闭</button>
          </template>
        </model>
      </div>
    </template>

我们的插槽分发了内容  
因为lookData是\[\{ name: “代码哈士奇”, id: 1 \},\{ name: “哈哈”, id: 2 \}\]中的其中一个详细可以看[上篇][Link 1]  
我们在插槽中打印

console.log(this.$slots)

可以看到，两次的内容不一样  
而这些内容的获取就是通过 this.$slots  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 5]

![在这里插入图片描述][20201129225903345.png]

## 爷孙传值attrs ##

获取父组件中的非props内容

$attrs

如果在子实例中调用打印

console.log(this.$attrs)

可以看到如下  
![在这里插入图片描述][2020112923072534.png]

我们来个隔代传值  
爷爷组件为test  
父组件为model  
孩子为easy-model  
easy-model代码如下

<template>
      <div>
        <button @click="onDo">点击</button>
      </div>
    </template>
    
    <script> export default { name: "EasyModel", methods:{ onDo(){ console.log(this.$attrs) } } }; </script>

在model中引入 传递$attrs其实就是将父亲给孩子 就是爷爷给孙子  
就是model将tes的t给easy-model

<easy-model v-bind="$attrs"></easy-model>

test中

然后我们看看打印结果  
![在这里插入图片描述][20201129231720898.png]  
完成隔代遗传

# 重点★★★property #

我们先来看看vue的代码  
在ode\_modules\\vue\\types\\options.d.ts中定义了包括声明周期的引用在这里插入图片描述  
当然深入挖掘我没用那个能力和时间  
我们发现vue.d.ts中发现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 6]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 7]

![在这里插入图片描述][20201129202703628.png]  
我们在控制台打印下property  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 8]  
发现了什么吗，常用的实例都在这里，我们引用创建页面的时候都已经挂载了

## 自定义实例 ##

在main.js中

Vue.prototype.dmhsq = "I,dog"

在我们的组件中

console.log(this.dmhsq)

![在这里插入图片描述][20201129204539680.png]  
**使用场景**  
可以定义一些全局的变量去使用

## 自定义实例方法 ##

在main.js中

function myTest(){
      console.log("我是可爱的狗子")
    }
    
    Vue.prototype.myTest = myTest;**加粗样式**

在任意页面调用  
![在这里插入图片描述][20201129210441931.png]

## 使用场景 ##

### 全局引入js文件的某个方法 ###

在自己创建的js中 比如util.js中写入  
![在这里插入图片描述][20201129231955593.png]

function myTest(){
      console.log("我是可爱的狗子")
    }
    
    export  {myTest}

在main.js中

import {myTest} from "./util/util";
    
    Vue.prototype.myTest = myTest;

### 全局引入整个js文件 ###

这样写util.js

export default {
      myTest(){
        console.log("嘿,I,dog");
      }
    }

在main.js中

import util from "./util/util";
    
    Vue.prototype.util = util;

在实例中

this.util.myTest()

![在这里插入图片描述][20201129232317730.png]

# 实例方法 #

## 监听$watch ##

监听变化 可以是表达式 也可以是单个值 也可以是property

this.$watch(()=>this.testData,()=>{
          console.log(this.testData)
        })

![在这里插入图片描述][20201129233510814.gif]  
我们还可以监听子组件的变化 比如我们监听model的props: \[“mdshowd”\]

this.$watch(()=>this.mdshowd, () => {
            console.log(this.mdshowd);
        })

![在这里插入图片描述][20201129234000242.gif]  
监听对象或者数组内部变化不会触发  
我们点击改变post.name的值但是post没用被监听到改变  
![在这里插入图片描述][2020112923453340.gif]  
如果要监听内部变化就要deep

### deep ###

将post的值传递给model子实例

在子实例中监听变化

this.$watch(
          () => this.dList,
          () => {
            console.log("dog wang wang!");
          },
          { deep: true }
        );
      }

效果如下  
![在这里插入图片描述][20201130001034239.gif]

### 取消监听 ###

如下

const haha = this.$watch(
          () => this.dList,
          () => {
            console.log("dog wang wang!");
          },
          { deep: true }
        );
        haha();//在你需要监听的地方掉用，就只会监听一次
        console.log(haha())
      }

![在这里插入图片描述][20201130001916742.png]

### immediate ###

同deep开启方法相同，加入可立即返回回调函数执行结果

加入 immediate会让取消监听失效  
调用haha监听  
如果我们在haha内部调用haha

const haha = this.$watch(
          () => this.dList,
          () => {
            haha();
            console.log("dog wang wang!");
          },
          { deep: true,
          immediate:true}
        );
        haha();

就会报错  
![在这里插入图片描述][20201130002251884.png]  
文档给出方案是 检测函数可用性

## emit ##

触发当前实例上的事件，常用于子组件监听父组件的事件或自定义事件

在子组件中

this.$emit("close");

父组件中

相当于调用了自定义事件

## forceUpdate ##

this.$forceUpdate();

强制重新渲染，只影响本身和插槽  
触发update

shuaxin() {
          this.$forceUpdate();
        },
     updated() {
        console.log("我更新了哈哈")
      },

![在这里插入图片描述][20201130005603435.png]

如果请求获得的数据没有及时渲染，就要调用它去  
如果我们从后台获取了数据需要v-for里面套v-if  
当item数据改变时 不能及时触发v-if需要用到  
forceUpdate

## $nextTick ##

数据没有及时更新时使用  
比如

<button @click="shuaxin">shuaxin</button>
     shuaxin() {
          this.testData = 2;
          console.log(this.$refs.pp.innerText);
          this.$nextTick(()=>{
            console.log(this.$refs.pp.innerText);
          })
        },

![在这里插入图片描述][20201130004805282.png]  
用在一些数据请求后，不能立马得到新数据，比如请求后台得到新数据，不能及时拿到新的去做一些处理，就要调用它

# VUE3新特性 #

设置全局属性的时候  
不再使用Vue.property.  
app.config.globalProperties.

> 记得练习哦

>   大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：[https://blog.csdn.net/qq\_42027681][https_blog.csdn.net_qq_42027681]。

> `未经本人允许，禁止转载`

![在这里插入图片描述][20201110144238980.gif_pic_center]

后续会推出

前端：vue入门 vue开发小程序 等  
后端： java入门 springboot入门等  
服务器：mysql入门 服务器简单指令 云服务器运行项目  
python：推荐[不温卜火][Link 2] 一定要看哦  
一些插件的使用等

大学之道亦在自身，努力学习，热血青春  
如果对编程感兴趣可以加入我们的qq群一起交流：974178910  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]

有问题可以下方留言，看到了会回复哦

[20201129201301284.png]: /images/20221120/3a50f4d9168542d681a00ed3a95f706e.png
[Link 1]: https://blog.csdn.net/qq_42027681/article/details/110272365
[2020112922253716.png]: /images/20221120/2e2889f530a647a6b2ccf393bb48fa30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]: /images/20221120/ec7e6db39daf4ce99059aba0cc33604d.png
[2020112922272114.png]: https://img-blog.csdnimg.cn/2020112922272114.png
[2020112922213221.png]: https://img-blog.csdnimg.cn/2020112922213221.png
[20201129224158508.png]: https://img-blog.csdnimg.cn/20201129224158508.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201129224238888.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[20201129224612918.png]: https://img-blog.csdnimg.cn/20201129224612918.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201129224826781.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201129225402541.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201129225552229.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[20201129225655193.png]: https://img-blog.csdnimg.cn/20201129225655193.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201129230208622.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[20201129225903345.png]: https://img-blog.csdnimg.cn/20201129225903345.png
[2020112923072534.png]: https://img-blog.csdnimg.cn/2020112923072534.png
[20201129231720898.png]: https://img-blog.csdnimg.cn/20201129231720898.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201129202607609.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201129202651976.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[20201129202703628.png]: https://img-blog.csdnimg.cn/20201129202703628.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201129202742539.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[20201129204539680.png]: https://img-blog.csdnimg.cn/20201129204539680.png
[20201129210441931.png]: https://img-blog.csdnimg.cn/20201129210441931.png
[20201129231955593.png]: https://img-blog.csdnimg.cn/20201129231955593.png
[20201129232317730.png]: https://img-blog.csdnimg.cn/20201129232317730.png
[20201129233510814.gif]: https://img-blog.csdnimg.cn/20201129233510814.gif
[20201129234000242.gif]: https://img-blog.csdnimg.cn/20201129234000242.gif
[2020112923453340.gif]: https://img-blog.csdnimg.cn/2020112923453340.gif
[20201130001034239.gif]: https://img-blog.csdnimg.cn/20201130001034239.gif
[20201130001916742.png]: https://img-blog.csdnimg.cn/20201130001916742.png
[20201130002251884.png]: https://img-blog.csdnimg.cn/20201130002251884.png
[20201130005603435.png]: https://img-blog.csdnimg.cn/20201130005603435.png
[20201130004805282.png]: https://img-blog.csdnimg.cn/20201130004805282.png
[https_blog.csdn.net_qq_42027681]: https://blog.csdn.net/qq_42027681
[20201110144238980.gif_pic_center]: https://img-blog.csdnimg.cn/20201110144238980.gif#pic_center
[Link 2]: https://buwenbuhuo.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201118225427296.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70#pic_center