vue

##############

Vetur 是 VS Code 的插件. 如果你使用 VS Code 来写 vue 的话，这个插件是必不可少的。

beforeCreate( 创建前 )

在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

created ( 创建后）

实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。然而，挂在阶段还没有开始, $el属性目前不可见，这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成

beforeMount

挂在开始之前被调用，相关的render函数首次被调用（虚拟DOM），实例已完成以下的配置：编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。

mounted

挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

beforeUpdate

在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程

updated（更新后）

在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用

beforeDestroy（销毁前）

在实例销毁之前调用，实例仍然完全可用，

这一步还可以用this来获取实例，
一般在这一步做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件

destroyed（销毁后）

在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

###############################

第一次页面加载会触发哪几个钩子

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

DOM渲染在哪个周期中已经完成

mounted

简述每个周期具体适合哪些场景
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom

created和mounted的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

数据请求在created和mouted的区别：

created是在组件实例一旦创建完成的时候立刻调用，这时候页面dom节点并未生成；mounted是在页面dom节点渲染完毕之后就立刻执行的。触发时机上created是比mounted要更早的，

两者的相同点：都能拿到实例对象的属性和方法。

讨论这个问题本质就是触发的时机，放在mounted中的请求有可能导致页面闪动（因为此时页面dom结构已经生成），但如果在页面加载前完成请求，则不会出现此情况。建议对页面内容的改动放在created生命周期当中。

实例和组件定义data的区别

vue实例的时候定义data属性既可以是一个对象，也可以是一个函数

const app = new Vue({
    el:"#app",
    // 对象格式
    data:{
        foo:"foo"
    },
    // 函数格式
    data(){
        return {
             foo:"foo"
        }
    }
})

组件中定义data属性，只能是一个函数

如果为组件data直接定义为一个对象

Vue.component('component1',{
    template:`<div>组件</div>`,
    data:{
        foo:"foo"
    }
})

则会得到警告信息

警告说明：返回的data应该是一个函数在每一个组件实例中

根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况
组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象

二、组件data定义函数与对象的区别

上面讲到组件data必须是一个函数，不知道大家有没有思考过这是为什么呢？

在我们定义好一个组件的时候，vue最终都会通过Vue.extend()构成组件实例

这里我们模仿组件构造函数，定义data属性，采用对象的形式

此时，该 div 中的所有元素都可以使用 vue 来进行操作了。

1、vue中的el，称之为挂载点。用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符，
相当于一个容器，跟上面的div id = "app"做关联，从此以后上面div id = "app"里面的内容要通过vue来渲染,都要经过vue处理才能看得到上面div里面的内容，此时，该 div 中的所有元素都可以使用 vue 来进行操作了。
（1）Vue会管理el选项命中的元素及其内部的后代元素
（2）可以使用其他的选择器,但是建议使用ID选择器
（3）可以使用其他的双标签,但不能使用HTML和BODY

2.data属性
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
跟微信小程序一样，所有的变量都要写在data里面
在Vue的data属性定义以下类型的数据：
1、字符串
2、整数
3、数组
4、对象
5、对象数组

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!-- 引入vue -->
<script src="js/vue.js"></script>
<script type="text/javascript">
// 入口函数
window.onload = function () {
new Vue({
el: "#div1",
data: {
// 定义字符串
name: "谷哥的小弟",
// 定义整数
number:9527,
// 定义数组
hobby:["篮球","足球","击剑"],
// 定义对象
user:{id: 21, name: "zxx", age: 50},
// 定义对象数组
users:[
{id: 21, name: "zxx", age: 50},
{id: 22, name: "zxc", age: 51},
{id: 23, name: "zcc", age: 52},
]
}
});
}
</script>
</head>
<body>
<h2 style="color: red;">本文作者：谷哥的小弟</h2>
<h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<div id="div1">
<!-- 获取字符串 -->
<h3>{{name}}</h3>
<!-- 获取整数 -->
<h3>{{number}}</h3>
<h3>{{number+1}}</h3>
<!-- 获取数组中的元素-->
<h3>{{hobby[0]}}</h3>
<h3>{{hobby[1].length}}</h3>
<h3>{{hobby[2]=="击剑"}}</h3>
<!-- 获取对象 -->
<h3>{{user}}</h3>
<h3>{{user.id}}</h3>
<h3>{{user.name}}</h3>
<h3>{{user.age}}</h3>
<!-- 获取对象数组中的对象-->
<h3>{{users[1].id}}</h3>
<h3>{{users[1].name}}</h3>
<h3>{{users[1].age}}</h3>
</div>
</body>
</html>

# vue实例的时候定义data属性既可以是一个对象，也可以是一个函数

const app = new Vue({
el:"#app",
// 对象格式
data:{
foo:"foo"
},
// 函数格式
data(){
return {
foo:"foo"
}
}
})

# 组件中定义data属性，只能是一个函数；如果为组件data直接定义为一个对象，则会得到警告信息，如下：

Vue.component('component1',{
template:`<div>组件</div>`,
data:{
foo:"foo"
}
})

3.template属性
用来设置模板，会替换页面元素，包括占位符。
Vue.component（）组件中会用到，其实很多地方都会用到

4.methods属性
放置页面中的业务逻辑，js方法一般都放置在methods中，用来写方法，函数的
computed后面会介绍
computed和methods是有区别的：computed是在值发生改变的时候才会触发效果，而methods只要刷新执行了就会触发，所有平时写VUE的时候，能用computed的尽量使用

5.render属性
创建真正的Virtual Dom

6.computed属性
用来计算
根据已经存在的属性计算出新的属性，对于同样的数据，会缓存。当其依赖属性的值发生变化是，这个属性的值会自动更新，与之相关的DOM部份也会同步自动更新。其实一般情况，我也会把一些关于逻辑的代码都写在computed中。

7.watch侦听属性
watch:function(new,old){}
监听data中数据的变化
两个参数，一个返回新值，一个返回旧值
当你有一些数据需要随着其它数据变动而变动时或者执行异步操作或开销较大操作时，建议使用watch
computed和watch是有区别的：
watch: 监视,能够监听到数据的变化,只要数据变化的时候,都会自定执行对应的方法,其中可以检测的数据来源分为三部分 data , computed , props computed: 计算属性,存在一个计算缓存的特性,每一次计算之后,只要里面的逻辑不发生变化,每一次重复调用,都会使用上一次执行的结果,能够节省计算的时间

Vue中子组件向父组件传递消息有两种方式：事件和回调函数

#####################

posted @ 2022-08-31 20:35 igoodful 阅读(166) 评论(0) 收藏举报

刷新页面返回顶部

igoodful

一枚数据库管理员（DBA），从事的数据库有：MySQL，PostgreSQL，Redis，MongoDB

vue

beforeCreate( 创建前 )

created ( 创建后）

beforeMount

mounted

beforeUpdate

updated（更新后）

beforeDestroy（销毁前）

destroyed（销毁后）

###############################

第一次页面加载会触发哪几个钩子

DOM渲染在哪个周期中已经完成

数据请求在created和mouted的区别：

实例和组件定义data的区别

二、组件data定义函数与对象的区别

公告

igoodful

一枚数据库管理员（DBA），从事的数据库有：MySQL，PostgreSQL，Redis，MongoDB

vue

beforeCreate( 创建前 )

created ( 创建后 ）

beforeMount

mounted

beforeUpdate

updated（更新后）

beforeDestroy（销毁前）

destroyed（销毁后）

###############################

第一次页面加载会触发哪几个钩子

DOM渲染在哪个周期中已经完成

数据请求在created和mouted的区别：

实例和组件定义data的区别

二、组件data定义函数与对象的区别

公告

created ( 创建后）